[디자인블럭] he30 : 배송 안내 – 휴무 기간, 배송 일정 시각화 블럭

배송 안내

 

 

 

 

 

✅ [디자인블럭] he30 : 배송 안내 – 휴무 기간, 배송 일정 시각화 블럭

 

 

 

 

 

🔠 블럭개요

공휴일, 휴가철, 명절 등 배송 일정의 변동이 예상되는 시기에 고객 혼선을 줄이기 위한 일정 안내 전용 블럭입니다. 달력 형태로 구성되어 한눈에 배송 가능일, 마감일, 휴무일을 구분할 수 있으며, 공지성 콘텐츠로 활용도가 높습니다.

 

 

 

 

 

📌 사용목적

• 배송 일정 공지로 고객 CS 감소
• 명확한 일정 제시로 신뢰도 향상
• 구매 타이밍 유도(마감일 강조)
• 주요 휴무일, 재개일을 강조하여 고객 불편 최소화

 

 

 

 

 

🎨 디자인 특징

• 배송 트럭 아이콘 + 달력 구조의 직관적 레이아웃
• ‘배송 마감’, ‘배송 휴무’, ‘배송 재개’ 컬러 구분 (오렌지/회색/레드)
• 주차별 구성으로 날짜별 계획 세우기 쉬움
• 타이틀, 설명 문구, 캡션 구성까지 완성도 있는 공지 디자인
• 모바일에서도 가로 스크롤 가능 – 반응형 대응 우수

 

 

 

 

 

❄️ 활용 예시 (제품/브랜드 등)

• 식품/신선식품 브랜드
“냉장 제품이라 배송 일정이 중요했는데, 캘린더 안내 덕분에 안심했어요.”
“배송 마감 전 미리 구매하라는 안내가 확실해서 타이밍 놓치지 않았어요.”
→ 유통기한, 신선도 중심 제품군에 최적화된 일정 공지용 블럭

 

• 생활용품 / 리빙 브랜드
“택배사별 배송 공지를 한눈에 확인하니 고객센터 문의 없이 해결됐어요.”
“재개일이 달력에 정확히 표시되어 편리했어요.”
→ 연휴 전후 재고 소진 대응, CS부담 감소 목적의 정보 전달

 

• 뷰티 / 시즌 한정 기획세트
“배송 마감이 표시되어 있어 선물용으로 구매하기 딱 좋았어요.”
“배송 재개일도 나와서 마음 편히 주문했죠.”
→ 이벤트/기획세트 구매 타이밍을 안내하는 유도형 콘텐츠에 적합

 

• 교육상품 / 교재 배송 브랜드
“방학 전에 교재 수령하고 싶었는데 일정이 명확해 참고가 됐어요.”
→ 수강 시작일 기준으로 교재 배송 일정을 안내하기에 활용 가능

 

• 전자제품 / 서비스 연계 제품군
“제품 등록 일정, 설치 예약과 연계되어 있어 미리 준비할 수 있었어요.”
→ 배송 및 사후 설치 일정 안내와 연동한 블럭으로 응용 가능

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 상세페이지 하단 배송 안내 영역 활용
휴무 시즌 전, 제품 구매 유도용 안내 콘텐츠로 삽입

 

• 이메일 / 문자 공지용 이미지 변환
‘배송 마감일 알림’으로 고객에게 사전 안내

 

• SNS 카드 콘텐츠
“🚚 배송마감 안내 – 00일까지 주문 시 정상 발송” 형태로 구성

 

• 블로그 공지형 포스트
공휴일 배송 스케줄 안내 콘텐츠에 블럭 활용해 가독성 향상

 

• 쇼핑몰 팝업/배너 구성
배송 마감 임박 시 알림용 팝업 배너로 전환 가능

 

 

 

 

 

💻 HTML 설명

기본 구조
– .calendar 테이블 형태로 달력 구성
– td.orange, td.gray, td.red 클래스로 상태별 날짜 지정

 

아이콘 및 택배사 안내
– .iconArea 영역에 트럭 일러스트 + 택배사 정보 삽입

 

텍스트 구성
– .title : 상단 타이틀 영역 – 공휴일/휴가철 안내 강조
– .notice, .info : 하단에 발송 기준 시간 및 재개일 텍스트 표시

 

스타일 포인트
– 날짜 셀 내부 구성 :
• .day : 숫자 표시
• .desc : 상태 텍스트 (“배송 마감”, “배송 휴무” 등)
– 상태별 색상 지정
• 배송 마감: 주황 (#d47e0d)
• 배송 휴무: 회색 (#ddd)
• 배송 재개: 진한 빨강 (#b71c1c)

 

반응형
– .tableArea에 overflow-x:auto 설정 → 모바일 스크롤 지원

 

 

 

 

 

👉 커스터마이징 팁

• 휴무 기간 변경 시 .orange, .gray, .red 클래스 날짜만 교체
• 택배사 로고/텍스트 교체 가능 → 브랜드별 커스터마이징
• 달력에 이벤트 정보 함께 삽입 가능 (예: 쿠폰 일정, 예약 이벤트 등)
• 폰트 사이즈, 강조 컬러 변경 시 브랜드 통일감 확보 가능
• 달력 대신 텍스트 리스트 방식으로도 수정 가능 (모바일 최적화 시 고려)

 

 

 

 

 

 

 

html

<!-- he30 : 배송 안내 -->
<div class="he30">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-12">
      <div class="box">
        <div class="box_inner">


          <!-- 트럭 아이콘 및 택배명 -->
          <div class="iconArea">
            <img src="{{$template}}/img/_hes/he30/he30_icn01.png" alt="트럭 아이콘">
            <p class="courier">( 택배사 : 대한통운, 로젠택배 )</p>
          </div>


          <!-- 타이틀 -->
          <div class="txtArea">
            <h4 class="title">
              <span>공휴일, 휴가철</span><br>
              배송 일정 안내
            </h4>
          </div>


          <!-- 달력 테이블 -->
          <div class="tableArea">
            <table class="calendar">
              <caption>2025년 8월</caption>
              <thead>
                <tr>
                  <th>SUN</th>
                  <th>MON</th>
                  <th>TUE</th>
                  <th>WED</th>
                  <th>THU</th>
                  <th>FRI</th>
                  <th>SAT</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="dim">27</td>
                  <td class="dim">28</td>
                  <td class="dim">29</td>
                  <td class="dim">30</td>
                  <td class="dim">31</td>
                  <td>01</td>
                  <td>02</td>
                </tr>
                <tr>
                  <td>03</td>
                  <td>04</td>
                  <td>05</td>
                  <td class="orange">
                    <div class="day">06</div>
                    <div class="desc">배송<br>마감</div>
                  </td>
                  <td class="gray">
                    <div class="day">07</div>
                    <div class="desc">배송 휴무</div>
                  </td>
                  <td class="gray">
                    <div class="day">08</div>
                    <div class="desc">배송 휴무</div>
                  </td>
                  <td class="gray">
                    <div class="day">09</div>
                    <div class="desc">배송 휴무</div>
                  </td>
                </tr>
                <tr>
                  <td class="gray">
                    <div class="day">10</div>
                    <div class="desc">배송 휴무</div>
                  </td>
                  <td class="gray">
                    <div class="day">11</div>
                    <div class="desc">배송 휴무</div>
                  </td>
                  <td class="red">
                    <div class="day">12</div>
                    <div class="desc">배송<br>재개</div>
                  </td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                </tr>
              </tbody>
            </table>
          </div>


          <!-- 안내문구 -->
          <div class="txtArea">
            <p class="notice">NOTICE</p>
            <p class="info">
              ※ 8월 6일(수) 오후 12시까지 결제된 주문 건만 발송됩니다.<br>
              ※ 8월 6일(수) 오후 12시 이후 결제 완료 주문은 8월 12일(화)부터 순차 발송됩니다.
            </p>
          </div>


        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he30 : 배송 안내
*****************************************************************/
.he30 {}

.he30 .row {}

.he30 .row>div {
    padding: 10px;
    background-color: #fff;
}

.he30 .box {
    background: #fff;
    border-radius: 15px;
    padding: 50px 20px;
}

/*  */
.he30 .iconArea {
    text-align: center;
}

.he30 .iconArea img {
    width: 50%;
    display: block;
    margin: 0 auto 5px;
}

.he30 .iconArea .courier {
    font-weight: 500;
    font-size: 1.250em;
    color: #999;
}

/*  */
.he30 .txtArea {
    text-align: center;
    margin: 20px 0;
}

.he30 .txtArea .title {
    font-weight: 700;
    font-size: 3.5em;
    color: #111;
}

.he30 .txtArea .title span {
    font-weight: 700;
    font-size: 0.750em;
    color: #aaa;
}

.he30 .txtArea .notice {
    margin: 10px 0;
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #999;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.0em;
    color: #555;
}

.he30 .txtArea .info {
    font-size: 1.0em;
    color: #333;
}

/* 달력 테이블 */
.he30 .tableArea {
    overflow-x: auto;
}

.he30 table.calendar caption {
    margin-bottom: 5px;
    caption-side: top;
    text-align: right;
    font-size: 1.0em;
    color: #666;
}

.he30 table.calendar {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
    table-layout: fixed;
}

.he30 table.calendar th,
.he30 table.calendar td {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100px;
    padding: 15px 1px;
    font-size: 1.0em;
    border: 1px solid #ccc;
}

.he30 table.calendar th {
    background-color: #f0f0f0;
    font-size: 0.750em;
    color: #555;
}

/* 지난달 날짜 */
.he30 table.calendar td.dim {
    color: #ccc;
    background-color: #fafafa;
}

/* 배송 마감, 휴무 */
.he30 table.calendar td.gray {
    background-color: #ddd;
    color: #555;
    font-weight: 500;
}

.he30 table.calendar td.red {
    background-color: #b71c1c;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
}

.he30 table.calendar td.orange {
    background-color: #d47e0d;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
}

/* 날짜 숫자 */
.he30 table.calendar .day {
    display: block;
    font-size: 1.125em;
    font-weight: 700;
}

/* 설명 텍스트 */
.he30 table.calendar .desc {
    font-size: 0.750em;
    font-weight: 500;
    line-height: 1.2;
}

/* 반응형 대응 */
@media screen and (max-width: 768px) {}