[디자인블럭] he35 : 히스토리/연혁 – 브랜드의 성장 과정을 한눈에 보여주는 블럭

 

 

 

 

 

 

✅ [디자인블럭] he35 : 히스토리/연혁 – 브랜드의 성장 과정을 한눈에 보여주는 블럭

 

 

 

 

 

 

🔠 블럭개요

연도별 주요 이력과 성장 스토리를 정리해 신뢰도와 브랜드 이미지를 강화하는 블럭입니다. 설립 초기부터 현재까지의 변화를 시각적으로 구성해 방문자에게 ‘역사’와 ‘노력’을 전달합니다.

 

 

 

 

 

📌 사용목적

• 브랜드/제품의 신뢰도 강화
• 주요 활동 연혁을 연도별로 보여주어 전문성과 투명성 부각
• 고객에게 기업의 성장 과정을 자연스럽게 소개
• 스토리텔링을 통한 감성적 브랜딩

 

 

 

 

 

🎨 디자인 특징

• 연도 강조 스타일로 시간의 흐름을 직관적으로 표현
• 텍스트와 이미지가 교차되는 카드형 레이아웃으로 가독성 향상
• 주요 이벤트를 월 단위로 정리해 상세한 연혁 표현 가능
• .reverse 클래스로 양방향 배치 – 단조로움 방지
• 연한 회색 배경 + 그림자 효과로 각 연혁 박스 강조

 

 

 

 

 

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

• 수산물 브랜드
“처음엔 동네 어민과 시작했는데, 이제는 전국 산지 제휴까지… 브랜드가 진심이더라고요.”
“검수 시스템, 리뷰 수까지 보여주니 믿고 구매하게 됐어요.”
→ 어민 직거래 기반 브랜드가 신뢰를 쌓는 히스토리 콘텐츠로 적합

 

• 뷰티/스킨케어 브랜드
“성분 개선, 리뉴얼 히스토리를 보고 제품을 개발해온 노력이 느껴졌어요.”
“지속적인 품질 개선 연혁이 신뢰를 주더라고요.”
→ 전성분 개선, 리뉴얼 주기 등 뷰티 브랜드의 품질관리 이력을 강조

 

• IT 스타트업
“기능 추가 및 UI 개선 히스토리를 연도별로 보니 더 프로페셔널하게 느껴졌어요.”
→ 앱 런칭부터 버전업 히스토리, 수상 이력 등을 타임라인으로 정리

 

• 식품 브랜드
“초창기에는 소규모였는데, 유통망 확장과 리뷰 돌파까지 보니 신뢰감 상승했어요.”
→ 생산-유통-고객평가 순으로 구성 시, 성장 흐름이 자연스럽게 연결

 

• 교육 콘텐츠 기업
“커리큘럼이 해마다 개선되고 있단 걸 보고 꾸준히 업그레이드 된다는 느낌 받았어요.”
→ 연도별 강좌 확대, 수강 후기 증가 등 교육 산업의 전문성을 표현

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 회사 소개 페이지
브랜드의 시작부터 현재까지 이력을 요약해 소개 페이지의 핵심 콘텐츠로 활용

 

• SNS 스토리 하이라이트
연도별 대표 이미지를 카드로 정리해 ‘우리의 성장 이야기’ 콘텐츠로 활용

 

• 브랜드 캠페인 페이지
“우리는 이렇게 달려왔습니다” 컨셉의 스토리텔링 페이지로 연결

 

• 영상 콘텐츠 인트로
히스토리 블럭 내용을 기반으로 연혁 애니메이션 영상 제작

 

• 보도자료용 타임라인 자료
미디어나 언론에 제공하는 연혁 요약 이미지로 변환하여 신뢰성 강화

 

 

 

 

 

💻 HTML 설명

기본 구조
– .box_inner 내부에 .imgArea(이미지) + .txtArea(텍스트)로 구성
– 짝수 박스마다 .reverse 클래스를 활용해 이미지 위치를 번갈아 표현

 

텍스트 구성
– .step: 연도 표시 (ex. "2020") – 대형 회색 폰트로 백그라운드 효과
– .desc: 연도 내 주요 활동을 <strong>월</strong> 단위로 나열

 

디자인 스타일
– 연한 그레이 배경 + 흰색 카드 박스 (background-color: #fff)
– 각 카드마다 box-shadow 효과로 부드러운 깊이감 표현
– 이미지 모서리는 border-radius: 10px로 부드러운 인상

 

반응형 고려
– .col-sm-12부터 .col-lg-8까지 설정되어 있어 모바일에서도 잘 보이도록 대응됨
– 카드 크기와 폰트는 자연스럽게 줄어들어 레이아웃 유지

 

 

 

 

 

👉 커스터마이징 팁

• 브랜드 컬러에 맞춰 .step 연도 색상 변경 가능 (기본 #ddd → 브랜드 메인컬러)
• 월별 이벤트 대신 분기별 혹은 제품별 히스토리로도 변환 가능
• 이미지 영역에 아이콘 삽입, 인포그래픽 스타일 변형도 가능
• box_inner 방향을 랜덤 또는 연도 기준으로 조절해 시각적 다양성 확보
• 클릭 시 상세 페이지로 연결되도록 a 태그로 확장 가능

 

 

 

 

 

 

html

<!-- he35 : 히스토리/연혁 -->
<div class="he35">
  <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/he35/he35_img01.jpg" alt="브랜드 런칭">
          </div>
          <div class="txtArea">
            <p class="step">2020</p>
            <h4>신선수산 런칭</h4>
            <p class="desc">
              <strong>01월</strong> 브랜드 네이밍 완료<br>
              <strong>02월</strong> 상표 등록 출원<br>
              <strong>04월</strong> 스마트스토어 입점<br>
              <strong>07월</strong> 로고 및 패키지 디자인 개발<br>
              <strong>08월</strong> 통영산 활문어 첫 판매 개시
            </p>
          </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/he35/he35_img02.jpg" alt="생산 확대">
          </div>
          <div class="txtArea">
            <p class="step">2021</p>
            <h4>전국 산지 제휴 확대</h4>
            <p class="desc">
              <strong>01월</strong> 완도·통영 어민 직거래 체결<br>
              <strong>05월</strong> 산지 물류센터 구축<br>
              <strong>10월</strong> 제주 활수산물 공급 시작
            </p>
          </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/he35/he35_img03.jpg" alt="품질 개선">
          </div>
          <div class="txtArea">
            <p class="step">2022</p>
            <h4>품질 검수 도입</h4>
            <p class="desc">
              <strong>02월</strong> 수산 전문가 검수 기준 수립<br>
              <strong>03월</strong> 검수팀 정식 운영 개시<br>
              <strong>05월</strong> 포장 전 촬영 시스템 구축<br>
              <strong>07월</strong> 검수 사진 고객 제공 개시<br>
              <strong>09월</strong> 냉장 패키지 리뉴얼<br>
              <strong>11월</strong> 검수 이력 자동화 시스템 도입
            </p>
          </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/he35/he35_img04.jpg" alt="리뷰 돌파">
          </div>
          <div class="txtArea">
            <p class="step">2023</p>
            <h4>누적 리뷰 1만 돌파</h4>
            <p class="desc">
              <strong>02월</strong> 누적 리뷰 5,000건 달성<br>
              <strong>06월</strong> 고객 응대 시스템 개편<br>
              <strong>09월</strong> 리뷰 평점 4.9점 유지<br>
              <strong>12월</strong> 누적 리뷰 1만건 돌파
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he35 : 히스토리/연혁
*****************************************************************/
.he35 {}

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

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

}

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

.he35 .box_inner.reverse {
    flex-direction: row-reverse;
}

/*  */
.he35 .imgArea {
    flex: 0 0 35%;
    padding: 10px;
    align-self: flex-start;
}

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

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

.he35 .txtArea .step {
    line-height: 1.0;
    font-weight: 900;
    font-size: 4.0em;
    color: #ddd;
    /* display: none; */
}

.he35 .txtArea h4 {
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 2.0em;
    color: #222;
}

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

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

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

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