문장의 구조화 (수정)

2015.06.17 19:19|

에너지드링크|

추천8|

조회수1,692|

댓글11

문장은 글자와는 좀 다른 설계가 필요 합니다. 글자로만 구성된다면 별문제가 없지만 그림이나 문장과 함께 들어간다면 그 구성 요소에 대해서 좀더 깊이 이해할 필요가 있는거죠.

글자들이 모여서 문장이 되는데 그 숫자를 음절수라고 부릅니다. 일단 쇼핑몰 콘텐츠를 설계하실때 가장 먼저 하셔야 할 부분은 강조 하고 싶은 주제를 축약하여 헤드카피를 잡아 나가는 것입니다. 헤드카피는 약 10개 정도의 핵심 메시지로 구성 하시면 되는데요, 헤드카피의 가장 중요한 역할은 바로 밑에 위치한 서브 헤드카피를 읽게 만드는 역할 입니다.

따라서 헤드카피는 검색최적화를 고려 하시면 안되구요, 사람의 감정, 본능등에 강하게 자극을 주는 컨셉으로 잡아 나가야 합니다. 위와 같은 식으로 본다면 헤드카피가 문장이 길어지고 설명적이면 밑에 위치한 서브 헤드카피나 바디카피를 읽지 않게 되겠죠? 그래서 반드시 헤드카피는 10음절 이내로 짧게 잡는 것이 좋습니다. 사람의 감정, 본능등에 강하게 자극을 주는 컨셉이라면 고딕이나 명조 계열로는 완성도가 나오기 힘들겠죠? 그래서 여기에 캘리그래피나 들쭉날쭉체 같은 유니크한 서체를 사용 하시면 좋습니다.

서브헤드카피의 역할은 헤드카피와 다른데요, 먼저 검색최적화가 되어야 합니다. 해당 상품명이나 브랜드명을 꾸준히 반복해야 하고 구체적이고 명확한 어떤 정보나 노하우를 알려주는 것이 그 목표가 되어야 합니다. 위치는 헤드카피 바로 밑에 위치하며 단으로 구성된 콘텐츠 박스 위에 위치하는 것이 좋습니다.서브헤드카피 부터는 정보 전달이 중요한 관계로 대부분 고딕 계열의 설체를 많이 사용 하게 되며 이 서체로 신뢰를 획득해야 합니다.

가장 큰 쇼핑몰의 가로폭이 1000 픽셀정도 되는 것 같은데요, 이정도 사이즈에서 문제점이 발생하는데 바디카피의 크기가 PC -WEB에 맞추면 모바일웹에서는 아주 작게 보이게 됩니다. 판매하는 상품의 특성상 모바일 트래픽의 전환율이 높다면 모바일 크기에 맞춰서 바디카피의 크기를 키워 주는 것이 좋습니다. 모바일 퍼스트로 생각한다면 먼저 모바일 사이즈에서 최소 가독성을 담보하는 크기를 바디 카피로 정하고 그 역순으로 서브 헤드카피, 헤드카피로 폰트를 규격화 하는 것이 좋습니다.


일단 크기가 정해 졌다면 그 다음 차례는 단을 나누는 것입니다. 세련된 느낌은 3단 구성이 좋구요, 4단 구성까지도 고객이 볼 때 무리가 없습니다. 내부적으로 2단, 3단, 4단으로 디자인 템플릿을 만들어 놓으셔서 헤드카피를 우주 최고 더블 가격할인(2단), 3대 특장점 안내(3단), 아무도 몰랐던 4가지 혜택(4단) 같은 방식으로 사용 하시면 좋습니다.

군데군데 사용하는 이미지카피는 친절함, 따스함, 인간적임, 배려 같은 내용을 담게 되는데요, 이미지 카피는 명조 계열을 사용 하시면 좋습니다. 일반 명조 계열 보다는 신문명조 계열이 신뢰성을 주는데 좀 더 좋은 것 같더라구요.


헤드카피나 서브헤드카피는 가운데 정렬이 일반적이지만 바디카피는 무조건 좌측정렬이 되는 것이 좋습니다.


포토샵에서 이미지로 폰트를 만드는 것은 헤드카피에 국한 하시고 되도록 퍼블리싱을 통해서 웹폰트를 삽입하는 것을 추천해 드립니다. 특히 검색엔진에 강조 하고자 하는 키워드는 <B>태그가 아닌 <strong>태그로 감싸 주시면 좋구요, <h1>, <h2>, <h3>태그를 풍성하게 사용 하셔야 합니다.

자사쇼핑몰일 경우 연관상품, 추천상품 같은 썸네일 이미지를 넣어 주시고 내부 링크로 빌딩을 해 주시면 크로스셀링과 업셀링을 동시에 노려볼수도 있겠습니다.

표의 삽입은 아주 중요한 포인트인데요, 절대로 이미지로 해서 넣지 않습니다. 표 속에는 많은 키워드와 정보가 들어가는 공간이기 때문에 퍼블리싱으로 표를 만드시고 그속에 폰트로 정보를 삽입하는 것이 좋습니다. 이럴 경우 표는 반드시 크로스 브라우징, 반응형 웹으로 퍼블리싱을 하시는 것을 추천해 드립니다.

이렇게 헤드카피, 서브헤드, 바디카피들이 생성되면 텍스트 덩어리의 가독성 문제에 관심을 가지셔야 합니다. 글자 한자한자의 가독성과 달리 텍스트 덩어리의 가독성은 그 텍스트를 둘러싸고 있는 외부 여백과 그 텍스트의 내부 행간에 의해 결정 됩니다. 외부 여백은 세브헤드카피와의 구분, 동일한 위치의 다른 바디카피와의 구분 같은 역할을 하게 되고 내부 행간은 그 텍스트 덩어리의 문장을 쉽게 읽을수 있는 역할을 담당하게 되는 거죠. 각각의 덩어리의 외부 여백과 내부행간을 조정하여 가장 세련된 조정을 마칩니다.

헤드카피, 서브헤드, 바디카피 덩어리들이 모두 자신의 고유한 여백을 가지고 있는데 그 부분이 겹치거나 더 멀어지는 다양한 경우가 존재 합니다. 이 부분은 말로 설명 드리기가 좀 어렵네요. 백화점이나 잡지 같은 것을보면 아주 깔끔하고 구조적이며 조직화 된 글자들을 느끼시게 되는데요, 바로 이런 방법으로 설계를 하였기 때문에 가능한 것이죠. 하여간 이런 감각이 생겨나면 글자만으로도(사진이 없이) 아주 세련된 시각적 구조로 콘텐츠를 만들수 있게 됩니다.

이런 식으로 텍스트를 삽입하면 아마 경쟁사 콘텐츠 보다 월등히 많은 내용의 텍스트가 쇼핑몰 상품 상세 페이지에 삽입되게 됩니다. 본문 영역으로 볼때 저는 2,000자 이상이면 좋다고 보는데요, 이럴 경우 상품명은 물론 브랜드명, 연관 키워드등이 풍성하게 들어가기 때문에 고객은 물론 검색엔진도 거부할수 없는 수준의 콘텐츠가 저절로 만들어지게 되는 거죠. 무엇보다 구매 전환율이 올라가는 것은 당연하지 않을까 싶습니다. 

 

 

[추가 샘플]

 

 

 

클릭해서 확대해 보세요.

 

  • 글자 색상은 검은색의 밀도차로 표현 했으니까 실제로 색상을 대입 하실때 지금 강도에 따른 칼라를 적용 하시면 좋습니다.
  • 고딕 1종 + 명조 1종의 구성이구요, 텍스트 덩어리 외부의 여백을 자세히 보세요. 어떤 덩어리와 어떤 덩어리가 가까운지, 먼지 그런 균형감이 전체의 가독성을 높여주는거죠.
  • 각 글자의 자간도 서로 다른데요, 섬세하게 보시면 어떤 감도로 붙여 놓았는지, 아니면 약간 떨어져 있는지를 아실수 있을 겁니다.  
  • 좌측 정렬이 아닌 좌우 정렬로 되어 있는 것은 단으로 텍스트 덩어리를 구성할 경우 이렇게 하는 것이 훨씬 더 가독성이 높아지기 때문입니다.  
  • 디자이너들에게 작업 지시를 하실때 이렇게 흑백으로 해서 가져 오라고 하면 어떤 부분이 핵심인지 가독성은 어떤지 구조는 세련된지 한눈에 파악하시기 좋으실 겁니다.

 

 



이거 점점 혀가 길어지네요, 원래 내공 없는 사람의 글이 분량이 많은 법이죠.

 

 

너그러이 이해를 .... ㅜㅜ 

하트 아이콘kissred님 외 7명이 추천했습니다.

  •   에너지드링크
댓글 11
소셜로그인
번호제목작성자등록일추천조회
36쇼핑몰홍보[6] 

블루쇼룸

15.12.2011,046
35소셜에 광고하고계신분 있나요[5] 

망개떡사려

15.12.150740
1스토어팜, 네이버 검색결과에 자동 반영으로 변경 

교육보스

15.12.1421,634
34쇼핑몰 유입수 관련 답변부탁드려요~[2] 

더블에잇

15.11.260748
72네이버 스토어팜과 네이버 모두의 연동관계에 대하여 [3] 

윤입니다

15.11.26-2851
33선배님들 도움이 필요합니다.[5] 

리쿠키

15.11.200788
32오픈마켓 상품들 직접 다올리시나요 ?[3] 

blogface

15.11.182720
31쇼핑몰 운영하고 있습니다. 구매율이 너무 저조한듯합니..[6] 

돼랑이23

15.11.0901,613
30네이버쇼핑 순위[6] 

연라한

15.11.0401,097
29쇼핑몰 매매시 가격산정 (질문) 

공항딴따라

15.10.190683
28구매 의욕을 떨어뜨리는 옥의티[15] 

백만송이

15.10.1511,594
27사업자를 노출시키고 싶지 않은데 노출시켜야 하는 상황.. 

카바니

15.10.080641
71스토어팜도 품질지수,저품질이 있나요?[3] 

blogface

15.10.0601,227
26스토어팜이나 폐쇄몰 사용해보신분 계신가요[4] 

카바니

15.09.1801,160
25쇼핑몰에 타사의 제품 가격을 보여주고 비교 하는게 가..[3] 

박제이크

15.09.100889
24쇼핑몰에 대해 궁굼한게 있어요[6] 

쓰리앤

15.09.090965
6자사몰과 스토어팜 동시운영시 장단점?[4] 

승승장기

15.08.2811,828
23쇼핑몰에 사용할 이미지의 라이센스 관련 문의입니디.[3] 

uniquest

15.08.2501,032
22홈페이지 내 배송추적 기능[1] 

ㄲㄴ울

15.08.130762
21네이버 지식 쇼핑 랭킹에 관한 질문입니다. (상대 업체가..[1] 

빠밤밤

15.07.2901,613
20쇼핑몰에서 사용하는 이미지 저작권에 대한 정리 

uniquest

15.07.1021,306
19이건 어때요? 쇼핑몰 상품 상세페이지 상단 UX : 호시샵[8] 

에너지드링크

15.07.0431,640
18카페24 기반으로 쇼핑몰 운영(고려) 시 ... 소소한 팁..[9] 

uniquest

15.07.0183,700
17무모한 실험에 참여할 욕심 많은 쇼핑몰을 찾습니다. 히..[2] 

에너지드링크

15.06.2241,519
16마지막 쇼핑몰 이야기 [6] 

에너지드링크

15.06.2091,574
15이미지 퀄리티에 대한 쓸데 없는 이야기 [6] 

에너지드링크

15.06.1992,130
14문장의 구조화 (수정)[11] 

에너지드링크

15.06.1781,693
13퀼리티의 기본은 폰트[20] 

에너지드링크

15.06.16122,607
12콘텐츠 퀄리티 높이는 방법 이미지의 경우 [16] 

에너지드링크

15.06.10162,649
11모바일 할인 혜택[2] 

라킴

15.05.280694
첫 페이지로 이동 이전 페이지로 이동 123456 다음 페이지로 이동 마지막 페이지로 이동
top
아이보스 배너광고 영역