[디자인블럭] he38 : 포스터 배너03 – 임팩트 있는 문구로 시선 강탈!

 

 

✅ [디자인블럭] he38 : 포스터 배너03 – 임팩트 있는 문구로 시선 강탈!

 

 

 

 

 

🔠 블럭개요

심플한 사진 위에 감성적인 타이포그래피가 삽입된 형태로, 브랜드 또는 제품의 메시지를 짧고 강렬하게 표현할 수 있는 포스터형 디자인 블럭입니다. 중앙 정렬된 레이아웃과 독특한 텍스트 배치로 감성적 임팩트를 극대화합니다.

 

 

 

 

 

📌 사용목적

• 브랜드 캠페인 메시지 전달
• 이벤트나 시즌 홍보용 포스터 배너
• SNS 업로드용 콘텐츠 제작
• 제품/브랜드의 감성 이미지 강조

 

 

 

 

 

🎨 디자인 특징

• 중간 중심 정렬을 기반으로 한 시선 집중형 레이아웃
• 텍스트 회전 및 위치 조절로 유쾌함 강조
• 배경 이미지에 따라 다양한 분위기 연출 가능
• 브랜드명, 해석 문구, 타이틀 등 계층 구조 명확하게 설정

 

 

 

 

 

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

• 식품 브랜드
“문구만 봐도 웃음이 나요. 제품보다도 이미지가 먼저 눈에 들어왔어요.”
“‘한번 띠~’ 이 멘트에 반해 충동구매 했어요!”
→ 유머와 감성이 섞인 문구로 신선식품 캠페인 진행 시 효과적

 

• 유아용품 브랜드
“아이 사진과 귀여운 문구의 조합이 최고예요. SNS에 공유했더니 반응도 좋았어요.”
→ 감성적인 비주얼과 어울려 육아용품, 이유식 브랜드에 적합

 

• 뷰티 브랜드
“상큼한 분위기로 썸머 리미티드 에디션에 딱 맞았어요.”
→ 계절 테마에 맞춰 트렌디한 이미지와 감성 문구로 제품 강조

 

• 전자제품 브랜드
“감성 마케팅용으로 이미지형 배너 제작에 활용했는데 반응이 좋았어요.”
→ 텍스트를 강조한 연출로 프리미엄 또는 기획 제품 포스터로도 유용

 

• 교육/문화 산업
“캠페인 참여 유도 문구 넣으니 반응률이 높았어요.”
→ 교육 기관/전시회 등 캠페인 메시지 포스터 제작 시 활용 가능

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• SNS (인스타그램, 페이스북)
→ ‘한번 띠~’ 같은 짧은 유행어를 활용한 피드 콘텐츠로 유저 공감 유도

 

• 홈페이지 배너
→ 시즌 한정 제품이나 캠페인 프로모션을 위한 메인 배너로 적용

 

• 오프라인 POP/포스터
→ 매장 전면부 또는 포토존 연출용으로 활용해 고객 시선 확보

 

• 광고용 카카오톡/문자 이미지
→ 톡톡 튀는 이미지로 프로모션 알림 이미지 콘텐츠 제작

 

 

 

 

 

💻 HTML 설명

.he38 – 전체 박스 스타일로 패딩 및 위치 설정
.box – 내부 구조 정렬을 위한 flex 구조
.imgArea img – 배경 이미지 삽입 위치
.braArea – 브랜드명 표시 영역 (기본은 숨김 처리)
.txtArea – 텍스트 박스 전체 (중앙 위치 조정 포함)
.sub – 해석 문구: 회전 및 배경 색상으로 강조
.title – 메인 문구: 폰트 크기와 회전 적용
.desc – 설명문 (기본은 숨김 처리, 필요 시 표시)

 

 

 

 

 

👉 커스터마이징 팁

• .title의 transform 값 조정으로 텍스트 각도 변경 가능
• .braArea를 display: block으로 바꾸면 상단 브랜드명 활성화
• .desc를 보여주고 싶다면 display: block 처리하여 정보성 텍스트 노출
• 배경 이미지 변경 시 이미지 대비 텍스트 색상 조정으로 가독성 유지

 

 

 

 

 

 

 

html

<!-- he38 : 포스터 배너03 -->
<div class="he38">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">


      <div class="box">
        <div class="braArea">상큼농장</div>
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he38/he38_img01.jpg" alt="오렌지에 중독된 귀여운 아기">
        </div>
        <div class="txtArea">
          <p class="sub">해석 : 한개 더~</p>
          <p class="title">한번 띠~</p>
          <p class="desc">
            이 표정 실화냐?<br>
            <strong>첫 입 베어 물면<br>중독 100%</strong><br>
            우리집 냉장고 비상!
          </p>
        </div>
      </div>


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

 

 

 

 

 

css

/*****************************************************************
he38 : 포스터 배너03
*****************************************************************/
.he38 {
    margin: 0;
    padding: 0;
    position: relative;
    /* border-top: 1px solid #f00; */
}

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

.he38 .box {
    display: flex;
    position: relative;
    width: 100%;
}

.he38 .imgArea {
    width: 100%;
    position: relative;
}

.he38 .imgArea img {
    width: 100%;
    display: block;
    height: auto;
}

/*  */
.he38 .braArea {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #84a100;
    padding: 12px 24px;
    border-radius: 0 0 40px 10px;
    font-size: 1.5em;
    color: #fff;
    z-index: 1;
    display: none;
}

/*  */
.he38 .txtArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 20px), calc(-50% - 300px));
    width: calc(100% - 50px);
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
    /* background-color: rgba(255, 255, 255, 0.3); */
    /* border: 5px solid #fff; */
    border-radius: 20px;
    padding: 0px 0px;
}

.he38 .txtArea .sub {
    position: relative;
    transform: translate(-10px, 30px) rotate(20deg);
    display: inline-block;
    background-color: #111;
    border-radius: 3px;
    margin-left: 180px;
    padding: 5px 15px;
    font-weight: normal;
    font-size: 1.125em;
    color: #fff;
    /* display: none; */
}

.he38 .txtArea .title {
    margin-top: 0px;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    -webkit-text-stroke: 0.5px #fff;
    text-stroke: 0.5px #fff; */
    transform: rotate(35deg);
    line-height: 1.2em;
    font-family: 'KOTRA_SONGEULSSI';
    font-weight: 900;
    font-size: 5.0em;
    color: #111;
}

/* .he38 .txtArea .title strong {
    background-color: #111;
    border-radius: 3px;
    padding: 5px 15px;
    font-weight: normal;
    font-size: 0.250em;
    color: #fff;
} */

.he38 .txtArea .desc {
    font-size: 1.250em;
    color: #111;
    display: none;
}

.he38 .txtArea .desc strong {
    color: #70a000;
    font-weight: 700;
}

/*  */
@media screen and (min-width: 768px) {
    .he38 .txtArea {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% + 20px), calc(-50% - 500px));
        width: calc(100% - 50px);
    }
}