[디자인블럭] he03 : 사용방법 – 직관적인 단계별 가이드로 사용자 이해도 UP

 

 

 

 

 

 

 

✅ [디자인블럭] he03 : 사용방법 – 직관적인 단계별 가이드로 사용자 이해도 UP

 

 

 

 

 

🔠 블럭개요

제품 사용법을 1단계부터 순차적으로 설명하는 스텝 가이드형 블럭입니다. 간단한 일러스트 이미지와 함께 설명이 병행되어, 처음 사용하는 소비자도 손쉽게 따라 할 수 있도록 설계되었습니다.

 

 

 

 

 

📌 사용목적

• 사용법이 복잡하거나 순서가 중요한 제품의 사용 가이드 제공
• 신규 고객이나 처음 사용하는 이들을 위한 안내 콘텐츠
• FAQ 또는 고객센터 문의를 줄이기 위한 시각적 설명 보완
• 상세페이지 내 '사용 방법' 영역의 기능성 강화

 

 

 

 

 

🎨 디자인 특징

• .step 태그로 단계별 구분 (Step 01~04 등), 시각적 순서 강조
• 이미지 + 텍스트 병렬 배치 → 이해도 및 직관성 높임
• .box_inner.reverse 클래스를 활용해 카드마다 좌우 배치 반전
• 심플한 흑백 일러스트 활용으로 깔끔하고 전문적인 분위기 연출
• 텍스트는 짧고 명료한 문장으로 구성, 중요한 포인트는 굵게 강조

 

 

 

 

 

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

• 화장품/스킨케어 브랜드
“앰플이나 에센스 제품 처음 쓸 때, 이 블럭 덕분에 어떻게 사용하는지 한눈에 이해됐어요.”
→ 스킨케어 루틴이나 제형별 바르는 순서 가이드에 적합

 

• 건강기능식품 브랜드
“1포, 1일 섭취량, 복용 시점 등 복잡한 복용법이 이미지랑 같이 나와 있어서 너무 편했어요.”
→ 분말형, 앰플형, 젤리형 등 복용법이 중요한 제품에 필수

 

• 생활용품/세제류
“세탁조 클리너 처음 써보는데 단계별로 정리돼 있어 헷갈리지 않아서 좋았어요.”
→ 용량 계량, 사용 순서 등을 쉽게 안내

 

• 가전제품/소형 디바이스 브랜드
“충전기 연결부터 초기 세팅까지 쉽게 설명돼 있어 제품 설치가 편했어요.”
→ 초기 설정, 배터리 충전, 연결 가이드 등

 

• 반려동물 용품 브랜드
“처음이라 어떻게 먹이는지 걱정했는데 순서대로 보니 금방 익숙해졌어요.”
→ 투약, 간식 급여, 사용 전 준비물 안내 등에 활용 가능

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 상세페이지 중단 사용법 구간
텍스트만 있는 사용법보다 시각적 구성으로 사용 이해도 상승

 

• 인스타/블로그 설명 콘텐츠
1단계씩 컷 이미지로 나눠 ‘사용법 가이드’ 시리즈 콘텐츠 구성

 

• 리플렛/제품설명서 PDF
스티커 또는 패키지 내부 동봉용 리플렛에 삽입해 설명 강화

 

• 영상 콘텐츠의 보조자료
튜토리얼 영상 속 자막 + 해당 이미지 카드로 시각적 반복 노출

 

• 제품 패키지 측면 인쇄
QR코드와 함께 Step 이미지로 인쇄하여 직관적 사용법 안내

 

 

 

 

 

💻 HTML 설명

구성 요소
– .box 단위로 Step 01~04까지 개별 카드 구성
– .imgArea : 설명을 돕는 단순화된 일러스트 아이콘 삽입
– .txtArea : 단계별 설명 (헤드라인 + 상세 문장)

 

텍스트 구성
– .step 클래스: 어두운 배경에 흰 글씨로 스텝 구분 강조
– h4 태그: 짧고 강렬한 설명 문장, 줄바꿈 고려한 구성
– 주요 키워드는 굵은 글씨 또는 컬러 처리 가능

 

디자인 요소
– 카드형 디자인에 radius + 그림자 효과로 부드러운 느낌
– .reverse 클래스로 이미지 위치 반전 가능 (가독성 다양화)
– 여백이 넉넉하고 정돈된 UI로 모바일에서도 높은 가독성 유지

 

반응형 구조
– .col-sm-12 col-md-10 col-lg-8 mx-auto 구조로 해상도별 중앙 정렬

 

 

 

 

 

👉 커스터마이징 팁

• Step 개수를 줄이거나 늘릴 수 있으며, ‘중요 팁’ 추가 블럭도 삽입 가능
• .step 배경색을 브랜드 컬러로 변경해 아이덴티티 강화
• 일러스트 대신 실제 제품 사용 컷으로 교체해 현실감 강화
• 하단에 ‘주의사항’, ‘보관법’ 추가 영역 삽입으로 상세 설명 확장
• .box_inner 안에 GIF 삽입도 가능하여 더 역동적인 안내 구성

 

 

 

 

 

 

html

<!-- he03 : 사용방법 -->
<div class="he03">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he03/he03_img01.jpg" alt="캡 오픈">
          </div>
          <div class="txtArea">
            <p class="step">Step 01</p>
            <h4>캡을 위로 올려<br>‘딸’ 소리가 나도록 개봉해 주세요.</h4>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he03/he03_img02.jpg" alt="내용물 흡입">
          </div>
          <div class="txtArea">
            <p class="step">Step 02</p>
            <h4>어플리케이터를 고무전에 꽂고<br>병을 거꾸로 들어 원하는 만큼 담아주세요.</h4>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he03/he03_img03.jpg" alt="얼굴에 바르기">
          </div>
          <div class="txtArea">
            <p class="step">Step 03</p>
            <h4>어플리케이터를 뽑아<br>손에 덜어 얼굴에 펴 발라주세요.</h4>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he03/he03_img04.jpg" alt="보관 방법">
          </div>
          <div class="txtArea">
            <p class="step">Step 04</p>
            <h4>사용 후에는 어플리케이터를<br>다시 꽂은 상태로 보관해 주세요.</h4>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he03 : 사용방법
*****************************************************************/
.he03 {}

.he03 .row>div {
    padding: 0px;
    background-color: #eee;
    border-bottom: 1px dashed #fff;
    width: 100%;
}

.he03 .box {
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin: 20px 20px;

}

.he03 .box_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
}

.he03 .box_inner.reverse {
    /* flex-direction: row-reverse; */
}

/*  */
.he03 .imgArea {
    flex: 0 0 40%;
    padding: 10px;
}

.he03 .imgArea img {
    width: 100%;
    border-radius: 10px;
}

/*  */
.he03 .txtArea {
    flex: 0 0 60%;
    padding: 10px;
    text-align: left;
}

.he03 .txtArea .step {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 30px 5px 10px;
    background-color: #111;
    border-radius: 5px;
    font-weight: 300;
    font-size: 1.250em;
    color: #fff;
}

.he03 .txtArea h4 {
    font-weight: 700;
    font-size: 1.5em;
    color: #111;
}

.he03 .txtArea h4 strong {
    color: #ff7b00;
}

.he03 .txtArea .desc {
    font-size: 1.125em;
    color: #444;
    line-height: 1.4;
}

.he03 .txtArea .desc strong {
    font-weight: 700;
    color: #111;
}

/*  */
@media screen and (min-width: 768px) {}