[디자인블럭] he16 : 추천 대상 – 이런 분들께 딱 맞아요!

 

 

 

 

 

 

✅ [디자인블럭] he16 : 추천 대상 – 이런 분들께 딱 맞아요!

 

 

 

 

 

🔠 블럭개요

제품 또는 서비스를 어떤 고객층에 추천하는지 한눈에 전달하는 정보 블럭입니다. 시각적인 아이콘과 간결한 문구로 추천 대상을 3단 카드형 구성으로 강조하여, 방문자가 자신의 상황에 맞는지를 쉽게 판단할 수 있게 돕습니다.

 

 

 

 

 

📌 사용목적

• 타깃 고객의 니즈를 명확히 분류해 고객 몰입도 향상
• 구매 전환을 유도하는 명확한 추천 가이드 제공
• 제품의 특장점과 고객 맞춤형 메시지로 신뢰감 강화

 

 

 

 

 

🎨 디자인 특징

• 3단 컬럼형 레이아웃 – 핵심 고객 유형을 균형 있게 배치
• 상단 컬러 아이콘 영역 – 시각적 주목도 강화
• 번호 표시 + 강조 텍스트 – 순서감과 집중도 유도
• 카드별 배경 컬러 통일 – 브랜드 일관성 유지
• 모바일 반응형 대응 – 다양한 화면에서도 깔끔하게 표현

 

 

 

 

 

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

• 식품 브랜드 / 신선식품
“쫄깃한 문어 식감이 딱 제 취향이에요. 탱글탱글해서 씹는 재미가 있어요.”
“손질 다 되어 있어서 요리 부담도 없고, 아이들과 함께 안심하고 먹을 수 있어요.”
→ 문어, 해산물, 밀키트 제품 등에 적합. 다양한 소비자의 니즈별 메시지를 통해 선택 유도

 

• 생활용품 브랜드 / 주방가전
“설거지까지 생각한 간편한 조리기기, 저 같은 요알못에게 꼭 필요했어요.”
“한눈에 나에게 맞는 제품을 추천해줘서 구매가 쉬웠어요.”
→ 전기레인지, 식기세척기 등 기능적 혜택을 강조할 때 효과적

 

• 뷰티 / 퍼스널케어 브랜드
“피부 타입에 따라 추천 카테고리가 나뉘어 있어서 고민 없이 골랐어요.”
“간편하게 관리할 수 있는 제품만 모아 보여줘서 좋았어요.”
→ 피부타입별, 사용편의성 중심으로 고객 분류 가능

 

• 전자기기 / 스마트기기 브랜드
“아이들과 같이 쓸 안전한 제품을 찾고 있었는데, 이 블럭이 딱 설명해줬어요.”
“초보자용, 전문가용으로 나눠 있어서 고르기 편했어요.”
→ 가족 사용 여부, 사용 목적에 따라 추천 제품을 분류하는 데 적합

• 교육 / 온라인 강의 플랫폼
“자녀 학습에 어떤 강의가 좋을지 한눈에 보여줘서 신뢰가 갔어요.”
“직장인 맞춤 강의가 따로 있어서 선택이 쉬웠어요.”
→ 수강 대상별 분류(학생, 직장인, 부모 등)로 맞춤형 콘텐츠 구성 가능

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• SNS 카드뉴스
카드 3단 구성을 활용한 슬라이드형 콘텐츠로 고객 유형별 특징을 소개

 

• 이메일 마케팅
구매 이력에 따라 맞춤 추천형 구성 삽입으로 CTR(클릭율) 상승

 

• 오프라인 POP 배너
매장 내 제품 앞에 추천 대상 안내판으로 활용, 구매 결정 유도

 

• 블로그 콘텐츠
“이런 분들께 추천드려요” 섹션으로 리뷰형 포스팅에 삽입 시 스토리텔링 효과 강화

 

• 광고 배너 디자인
배너 내에 3단 구조의 카드형 추천 요소를 배치하여 CTA 유도 강화

 

 

 

 

 

💻 HTML 설명

구성 구조
– div.row > div.col-4 : 3개의 카드형 추천 타겟을 가로 배열
– 각 카드 안에는 box > box_inner 구조로 아이콘과 텍스트를 수직 정렬

 

아이콘 영역
– iconArea : 상단 컬러배경 및 material-icons 적용
– 식감(restaurant), 요리편의(kitchen), 가족안심(family_restroom) 등 주제에 맞는 아이콘 사용

 

텍스트 영역
– txtArea : 중앙 정렬된 번호(step), 제목(h4), 설명(desc) 구성
– <strong> 태그로 강조어 구분 처리해 정보 포인트를 확실히 드러냄

 

스타일링
– 배경은 화이트, 그림자 및 border로 카드 구분
– 번호는 연회색으로 시각적 질서 제공
– 반응형 지원: @media screen and (min-width: 768px) 조건으로 아이콘 크기 확대 설정

 

 

 

 

 

👉 커스터마이징 팁

• 카드 수 조절 – 2단 또는 4단으로 확장 시 col-6, col-3 설정 변경
• 아이콘 교체 – material-icons 외 이미지 삽입도 가능, 브랜드 컨셉 맞춰 적용
• 컬러 커스터마이징 – iconArea의 배경색을 브랜드 컬러로 통일
• hover 효과 추가 – 카드에 마우스 오버 시 음영이나 확대 애니메이션으로 인터랙션 강화
• 텍스트 변경 – 제품군에 따라 "추천 대상" 메시지를 고객 언어로 다양하게 조합 가능

태그: 추천대상 블럭, 추천 카드디자인, 상세페이지 추천, 고객유형 분류, 상세페이지 구조, 상세페이지 디자인, 상세페이지 카드형, 상세페이지 사용자타입, 상세페이지 ux디자인, 상세페이지 추천포인트

 

 

 

 

 

 

 

html

<!-- he16 : 추천 대상 -->
<div class="he16">
  <div class="row">

    <!-- 카드 1 -->
    <div class="col-4 col-sm-4 col-md-4 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <span class="material-icons">restaurant</span>
          </div>
          <div class="txtArea">
            <p class="step">01</p>
            <h4><strong>쫄깃한 식감</strong>을 즐기는 분</h4>
            <p class="desc">
              탱글탱글한 문어 특유의 식감!<br>
              식감에 진심인 분이라면<br>
              강력 추천드려요.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 카드 2 -->
    <div class="col-4 col-sm-4 col-md-4 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <span class="material-icons">kitchen</span>
          </div>
          <div class="txtArea">
            <p class="step">02</p>
            <h4><strong>간편하게 요리</strong>하고 싶은 분</h4>
            <p class="desc">
              손질·세척 모두 완료!<br>
              번거로움 없이 바로 조리 가능해요.<br>
              요알못도 걱정 없어요.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 카드 3 -->
    <div class="col-4 col-sm-4 col-md-4 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <span class="material-icons">family_restroom</span>
          </div>
          <div class="txtArea">
            <p class="step">03</p>
            <h4><strong>안전한 먹거리</strong>를 찾는 분</h4>
            <p class="desc">
              국내산 자연산 문어 + 꼼꼼한 검수!<br>
              믿고 먹는 품질로<br>
              우리 가족 식탁도 걱정 없어요.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he16 : 추천대상
*****************************************************************/
.he16 {}

.he16 .row>div {
    padding: 0px;
}

.he16 .box {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #fff;
    height: 100%;

}

.he16 .box_inner {
    display: flex;
    flex-direction: column;
    /* 세로 방향 정렬 */
    flex-wrap: wrap;
    align-items: center;
    padding: 0px;
}

/*  */
.he16 .iconArea {
    width: 100%;
    background-color: #ff7b00;
    text-align: center;
    padding: 20px 10px 10px;
}

.he16 .iconArea .material-icons {
    font-size: 80px;
    color: #fff;
}

/*  */
.he16 .txtArea {
    padding: 10px 5px;
    text-align: center;
}

.he16 .txtArea .step {
    line-height: 1.4;
    font-weight: 100;
    font-size: 4.0em;
    color: #ddd;
    /* display: none; */
}

.he16 .txtArea h4 {
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 1.5em;
    color: #888;
}

.he16 .txtArea h4 strong {
    color: #111;
}

.he16 .txtArea .desc {
    font-size: 1.0m;
    color: #444;
    line-height: 1.4;
}

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

/*  */
@media screen and (min-width: 768px) {
    .he16 .iconArea .material-icons {
        font-size: 120px;
        padding: 30px 0;
    }
}