광고가이드라인 Ver 0.4 2014.09.19 1
Document History Date Description 작성자 2014.08.11 광고가이드발행김고은 2014.08.25 - 신간리스트배너 & 신간상세이미지가이드추가 - 전체적으로설명추가 김고은 2014.08.27 - 신간미리보기 HTML 제작가이드추가이일 2014.09.19 - 광고종류정리 - 저자강연회가이드추가김고은 2
광고종류 A. 타임라인광고 2 종 A-1. 신간미리보기링크 A-2. 책상세링크 5.page 참고 size : 696x260 size : 696x260 B. 더보기광고 12page 참고 / size : 360x222 C. 신간 C-1. 신간리스트배너 C-2. 신간상세이미지 17page 참고 size : 672x280 / 19page 참고 size : 720 x Y( 높이자유롭게지정 ) / 23page 참고 D. 신간텍스트 26page 참고 E. SNS 피드광고 2 종 F-1. 한줄소개 28page 참고 size : 720x720 / 31page 참고 F-2. 책선물이벤트 F. 저자강연회 size : 720x720 / 36page 참고 40page 참고 / size : 680x92 3
공통주의사항 배너이미지는모니터로보는느낌과 실제기기를통해보는이미지는상당한사이즈차이를느낄수있으니 작업물은휴대폰에넣어서확인하시면느낌을알수있습니다. * 어플안에광고가들어가는각화면 psd 첨부하였으니적용하여확인부탁드립니다. 타임라인광고더보기광고신간 > 리스트배너 4
A. 타임라인광고 5
A. 타임라인광고 적용화면 책속의한줄앱 > 한줄, 광장메뉴의타임라인리스트화면에노출 참고 psd 파일경로 : psd > A_ 타임라인광고 - 화면 psd : A_GUI_ 타임라인광고.psd - 배너 psd : A_ 샘플 _ 타임라인광고.psd 6
A. 타임라인광고 분류 A-1. 신간미리보기링크 신간책의경우책상세에한줄이없는경우가있어, 신간미리보기로링크 신간화면으로클릭유도문구 A-2. 책상세링크 신간미리보기일주일노출후에는책상세링크배너로교체됨 책상세화면으로클릭유도문구 7
A. 타임라인광고 기본사항 사이즈 696x260 이미지용량 30kb(±5) 파일형식 jpg, psd( 원본 ) 여백배경을제외한핵심요소가 30px 여백안쪽에위치 외곽선기본 instroke 1px ( 컨텐츠디자인에따라 1px 이상의두께가능, 배경색이짙을경우테투리적용하지않아도됨 ) 폰트무료폰트사용 8
A. 타임라인광고 레이아웃 1 서브타이틀 최대 2 줄 / 추천폰트사이즈 26~30pt / 본고딕추천 2 타이틀 최대 2 줄 / 추천폰트사이즈 44~60pt 3 클릭유도 TEXT 최대 1 줄 / 추천폰트사이즈 22~24pt 4 이미지 5 배경 책표지 or 작가사진 or 책분위기맞는 이미지를사용 단색또는배경삽입및자유롭게적용가능 * 주의사항 # 페이지참고 예시 1) 작가사진 예시 2) 책분위기에맞는이미지사용 9
A. 타임라인광고 샘플 앞의권장사항가이드를기준으로 책컨셉에따라배경삽입및레이아웃은자유롭게적용할수있습니다. 10
A. 타임라인광고 주의사항 지나치게화려한이미지나형광색등 text 의가독성을떨어트리는배경은지양합니다. 책속의한줄 gui 와너무상이할경우거부감이있어, 클릭율과효과가떨어집니다. 테스트예 ) 좋은예 - CTR 0.91% 나쁜예 - CTR 0.51% 11
B. 더보기광고 12
B. 더보기광고 적용화면 [ 배너적용화면 ] 책속의한줄앱 > 더보기메뉴화면에노출 참고 psd 파일경로 : psd > B_ 더보기광고 - 화면 psd : B_GUI_ 더보기광고.psd - 배너 psd : B_ 샘플 _ 더보기광고.psd 13
B. 더보기광고 기본사항 사이즈 360x222 이미지용량 30kb(±5) 파일형식 jpg, psd( 원본 ) 여백배경을제외한핵심요소가 30px 여백안쪽에위치 외곽선기본 instroke 1px ( 컨텐츠디자인에따라 1px 이상의두께가능, 배경색이짙을경우테투리적용하지않아도됨 ) 폰트무료폰트사용 14
B. 더보기광고 레이아웃 1 서브타이틀 최대 2 줄 / 추천폰트사이즈 22pt 2 타이틀 최대 2 줄 / 추천폰트사이즈 32~36pt 5 배경 4 이미지 단색또는배경삽입및 책표지 or 작가사진 or 책분위기맞는 자유롭게적용가능 이미지를사용 15
B. 더보기광고 샘플 16
C. 신간 17
C. 신간 분류 C-1. 신간리스트배너 사이즈 : 672x280 C-2. 신간상세이미지 사이즈 : 720 x Y( 높이자유롭게지정 ) 18
C. 신간 C-1. 신간리스트배너 > 적용화면 책속의한줄앱 > 책 > 신간메뉴화면에노출 참고 psd 파일경로 : psd > C_ 신간리스트배너 - 화면 psd : C_GUI_ 신간리스트배너.psd - 배너 psd : C_ 샘플 _ 신간리스트배너.psd 19
C. 신간 C-1. 신간리스트배너 > 기본사항 사이즈 672x280 이미지용량 20kb(±5) 파일형식 jpg, psd( 원본 ) 여백배경을제외한핵심요소가 30px 여백안쪽에위치 외곽선기본 instroke 1px ( 컨텐츠디자인에따라 1px 이상의두께가능, 배경색이짙을경우테투리적용하지않아도됨 ) 폰트무료폰트사용 20
C. 신간 C-1. 신간리스트배너 > 레이아웃 1 서브타이틀 최대 2 줄 / 추천폰트사이즈 28pt 왼쪽정렬 ( 앞에 45px 여백준수 ) 45px 2 타이틀 최대 2 줄 / 추천폰트사이즈 44pt 왼쪽정렬 ( 앞에 45px 여백준수 ) 5 배경 단색또는배경삽입및자유롭게적용가능 4 책표지또는책과어울리는이미지 오른쪽영역고정 책표지가들어가는경우 - 책사이즈및위치고정 (psd 참고 ) - 책정면이미지사용 21
C. 신간 C-1. 신간리스트배너 > 샘플 22
C. 신간 C-2. 신간상세이미지 > 적용화면 책속의한줄앱 > 책 > 신간 > 리스트배너 > 상세화면에노출 사이즈 720 x Y( 높이자유롭게지정 ) 이미지용량 200kb (±5) 파일형식 jpg, psd( 원본 ) 폰트 무료폰트사용 참고 psd 파일경로 : psd > D_ 신간상세이미지 - 화면 psd : D_GUI_ 신간상세이미지.psd - 상세 psd : D_ 샘플 _ 신간상세이미지.psd 23
C. 신간 C-2. 신간상세이미지 > 레이아웃 1 상단영역 -책제목 - 서브타이틀 - 이미지 ( 책표지, 책일러스트및책과어울리는이미지 ) 2 소개글폰트사이즈 : 최대 60pt ~ 최소24pt 3 출판사정보 ( 누락가능 ) 24
C. 신간 C-2. 신간상세이미지 > 샘플 25
D. 신간텍스트 26
D. 신간텍스트 HTML 적용화면 책속의한줄앱 > 책 > 신간 > 리스트배너 > 상세화면 > 신간미리보기에노출 분량 A4 용지 2-3 장분량 삽화이미지 1-3 개첨부가능 (jpg 또는 png 파일전달 ) 파일형식 TEXT 비고하이라이트챕터내용위주로내용구성그외추천사등마케팅문구도함께전달 27
E. SNS 광고피드 ( 카카오스토리 & Facebook) 28
E. SNS 광고피드 기본사항 사이즈 720x720 이미지용량 150~250kb 파일형식 jpg, psd( 원본 ) 이미지갯수 최대 9장 폰트 무료폰트사용 29
E. SNS 광고피드 분류 F-1. 한줄소개 책속의글귀와이미지 ( 저작권이없는무료이미지 ) 를사용하여피드제작 F-2. 책선물이벤트 책선물이벤트소개 + 책속글귀 + 이벤트당첨자발표 이벤트페이지 한줄페이지 당첨자발표페이지 30
E. SNS 광고피드 1. 한줄소개 > 레이아웃 참고 psd ( 파일경로 : psd > E_SNS 피드 > 1_ 한줄소개 ) E_SNS 피드 _ 한줄소개 _ 샘플.psd 1 이미지 책표지또는책내용에서요소를따와서디자인 또는책내용과어울리는이미지 ( 저작권이없는무료이미지 ) 로제작 2 책속글귀 최대 2 줄 / 추천폰트사이즈 26~38pt - 강조문구에포인트를주어가독성을높임 3 로고 Size : 130x22 * 책속의한줄 _ 로고.ai 파일참고 넣을공간이애매하거나없을경우누락가능 4 필수요소! 책제목, 작가명시 보통마지막페이지에넣음 31
E. SNS 광고피드 1. 한줄소개 > 레이아웃 2 책속글귀 책속글귀이외에추가로넣을수있는요소. - 추천사 - 작가소개 ( 유명한작가이거나특별한이력으로소개페이지가필요한경우 ) 32
E. SNS 광고피드 1. 한줄소개 > 가독성을높이기위한팁 01 한줄글귀가긴경우가독성이떨어지므로강조문구또는문장에포인트를준다. 나쁜예시 ) 강조문구가없는시안 ( X ) 좋은예시 ) 포인트를넣은시안 ( o ) 33
E. SNS 광고피드 1. 한줄소개 > 가독성을높이기위한팁 02 배경을전체적으로넣을경우 text 와이미지가겹치면가독성이떨어지므로 text 가들어갈여백을마련한다. 나쁜예시 ) 배경때문에 text 가보이지않는시안 ( X ) 좋은예시 ) 복잡한배경에그라데이션으로색을채워 text 가들어갈여백을만듬. (o) 34
E. SNS 광고피드 1. 한줄소개 > 샘플 신경숙저 인연은한번밖에오지않는다 김애란저 두근두근내인생 마야안젤루저 새장에갇힌새는자유를노래하니까. 35
E. SNS 광고피드 2. 책선물이벤트 > 레이아웃 01 이벤트페이지 (1 장 ) 참고 psd 파일경로 : psd > E_SNS 피드 >2_ 책선물이벤트 E_SNS 피드 _ 책선물 _ 이벤트페이지.psd 1 2 3 책선물 # 탄 서브타이틀 타이틀 상단에명시 ( 배경에따라 color 수정가능 ) 최대 2 줄 / 추천폰트사이즈 28pt 최대 2 줄 / 추천폰트사이즈 56pt 4 이미지 책표지또는이벤트관련이미지 5 배경이벤트와어울리게자유롭게적용 6 이벤트설명 추천폰트사이즈 28~34pt 36
E. SNS 광고피드 2. 책선물이벤트 > 레이아웃 02 책속의글귀페이지 2~7 장 참고 psd 파일경로 : psd > E_SNS 피드 > 1_ 한줄소개 E_SNS 피드 _ 한줄소개 _ 샘플.psd 한줄소개관련가이드참고. ( 책속의디자인에서요소를따와서디자인또는책내용과어울리는이미지 ( 저작권이없는무료이미지 ) 로제작 * 책속의한줄로고 ( 책속의한줄 _ 로고.ai 파일참고 ), 넣을공간이애매하거나없을경우누락가능 37
E. SNS 광고피드 2. 책선물이벤트 > 레이아웃 03 이벤트당첨자발표페이지 1 장 참고 psd 파일경로 : psd > E_SNS 피드 >2_ 책선물이벤트 E_SNS 피드 _ 책선물 _ 당첨자발표.psd 1 당첨자발표 text 상단에명시 2 타이틀책제목또는당첨자발표관련 text 최대 2 줄 / 추천폰트사이즈 56pt 3 이미지 & 배경 이벤트와어울리게자유롭게적용 38
E. SNS 광고피드 2. 책선물이벤트 > 샘플 이벤트페이지 한줄글귀페이지 당첨자발표페이지 책선물 1 탄 ) 식객 2 책선물 2 탄 ) 한글자 책선물 3 탄 ) 굿바이리스트 39
F. 저자강연회 40
F. 저자강연회 적용화면 [ 배너적용화면 ] 책속의한줄앱 > 한줄, 광장메뉴의타임라인리스트화면상단에노출 참고 psd 파일경로 : psd > F_ 저자강연회 - 화면 psd : F_GUI_ 저자강연회.psd - 배너 psd : F_ 샘플 _ 저자강연회.psd 41
F. 저자강연회 기본사항 사이즈 680x92 이미지용량 30kb 파일형식 png, psd( 원본 ) 여백배경을제외한핵심요소가좌우 28px 여백안쪽에위치 외곽선기본 instroke 1px ( 컨텐츠디자인에따라 1px 이상의두께가능, 배경색이짙을경우테투리적용하지않아도됨 ) 폰트무료폰트사용 42
F. 저자강연회 레이아웃 1 라운드처리 ( 필수 ) 2 서브타이틀 추천폰트사이즈 18~21pt R 값 10px 필요에따라누락가능 3 배경 단색또는배경삽입및 자유롭게적용가능 6 뱃지 ( 필수 ) Color 변경가능 무료초대 텍스트고정 5 타이틀 ( 필수 ) 1 줄고정 추천폰트사이즈 26~30pt 4 이미지책표지 or 작가사진 or 책분위기맞는이미지를사용 위치고정 * 타이틀이긴경우자리가없으면누락가능 43
F. 저자강연회 샘플 44
etc. 무료이미지, 무료폰트관련 45
etc. 무료이미지, 무료폰트관련저작권없는이미지사이트 - 01 저작권문제없는고퀄리티사진을구할수있는사이트 10곳 1. LITTLE VISUALS ( littlevisuals.co/ ) 2. UNSPLASH ( unsplash.com/ ) 3. Picjumbo ( picjumbo.com/ ) 4.GRATISOGRAPHY ( gratisography.com/ ) 5.FREE REFE MOBILE PHOTO ( getrefe.tumblr.com/ ) 6. Splitshire ( splitshire.com/ ) 7. New Old Stock ( nos.twnsnd.co/ ) 8. Function free photos ( wefunction.com/category/free-photos/ ) 9. Superfamous ( superfamous.com/ ) 10. IM Free ( imcreator.com/free ) 46
etc. 무료이미지, 무료폰트관련저작권없는이미지사이트 - 02 www.flickr.com 무료이미지검색방법이이미지와함께설명되어있어요 http://blog.naver.com/s9500849/40207685057 1. 키워드검색 2. 고급검색 > 아래내용체크 > 검색버튼 -Creative Commons 사용권이있는컨텐츠내에서만검색합니다. 상업용으로사용할컨텐츠를찾습니다. 수정, 적용또는빌드기반으로사용할컨텐츠를찾습니다. 3. 찾은이미지상세에서이미지에오른쪽클릭으로저작자표시확인하고다운로드. 4. 이미지에출처적어줌. (https://www.flickr.com/photos/ 아이디 ) 47
etc. 무료이미지, 무료폰트관련 무료폰트 기본적으로본고딕, 나눔체, 서울체를주로사용 무료폰트관련설명및폰트다운로드 http://www.bloter.net/archives/201916 구글 & 어도비 - 본고딕 ( 노토산스cjk ) 네이버 - 나눔고딕, 나눔고딕에코, 나눔바른고딕, 나눔명조, 나눔명조에코, 나눔손글씨붓, 나눔손글씨펜, 디컴즈 - 전라북도체, 김제시체 부산시청 -부산체 서울시 -서울남산체, 서울한강체 성동구청 -성동명조, 성동고딕 우아한형제들 -배달의민족한나체, 주아체 제주도청 - 제주한라산, 제주명조, 제주고딕 * 원본글꼴일부변형하여디자인하지않으면써도되는폰트 * bi & ci 에사용하지않으면써도되는폰트 고도몰한겨레한국청소년활동진흥원롯데마트 -고도체 -결체 - 청소년서체 - 통큰서체 48
신현진매니저 070-4269-9710 shin@ladybugs.co.kr 49