페이지 에디터 가이드 ver 2.1 이 자료는 카카오페이지 서비스에 대한 이해를 돕기 위한 목적으로 제작된 카카오와 포도트리의 자산이므로 카카오와 포도트리의 허락없이 임의로 편집 혹은 배포하거나 다른 목적으로 사용할 수 없습니다.
추가 및 변경사항 ver 2.1 여러장의 이미지를 한번에 올리는 ZIP 불러오기 기능이 추가되었습니다. (p. 3) 테두리 설정 기능이 추가되었습니다. (p. 5) 크게보기 버튼의 위치를 선택하는 기능이 추가되었습니다. (p. 7) 세로가 긴 동영상의 권장크기가 800으로 변경되었습니다. (p. 36) ver 2.0 (2013.03.22) 모바일 기기의 화면비율에 상관없이 페이지 영역의 비율이 고정되었습니다. 선택 할 수 있는 폰트가 새롭게 추가 되었습니다. 표지와 전체이미지 관련 레이아웃에서 첨부되는 이미지의 권장크기와 비율이 달라졌습니다. PDF 제작시 권장 크기와 비율이 달라졌습니다. 새로운 쪽 추가시 바로 직전에 선택했던 레이아웃으로 생성됩니다. 페이지파트너 앱이 업데이트 되었습니다. ver 1.2 (2013.03.07) 지원 가능한 동영상 크기 변경 곰인코더용 프리셋 파일 변경 ver 1.1 (2013.02.19) 전체이미지 레이아웃에서 텍스트가 포함된 이미지를 첨부할 경우 안내 추가 전체이미지 + 오디오 레이아웃에서 텍스트가 포함된 이미지를 첨부할 경우 안내 추가 PDF 불러오기 할때 이미지가 보이지 않는 문제 해결방법 추가
ZIP 불러오기 여러장의 이미지를 압축한 ZIP 파일을 페이지 에디터로 불러오면 전체이미지 레이아웃의 각각의 쪽으로 나뉘어 들어옵니다.
ZIP 불러오기 Test_Image_001.jpg Test_Image_002.jpg Test_Image_003.jpg Test_Image_004.jpg Test_Image_005.jpg... Test_Images.zip ZIP 불러오기 Test_Image_199.jpg Test_Image_200.jpg 보기와 같이 여러장의 이미지를 하나의 압축파일로 묶어서 ZIP 불러오기로 첨부하면 이미지 파일 1개당 1쪽으로 들어오게 됩니다. 이때 만들어지는 쪽의 순서는 이미지의 파일명 순서와 동일합니다. ZIP 파일 첨부 안내 파일 형식 : ZIP / 포함된 이미지 파일 형식 : JPEG, PNG (제작된 쪽이 한 쪽도 없을때를 기준으로 최대 200개) 이미지 크기 : 전체이미지, 전체이미지+동영상, 전체이미지 오디오의 권장사항과 동일 <주의사항> * 폴더를 압축할 경우 폴더 안에는 이미지 파일만 있도록 해야 합니다. (폴더안에 포함된 폴더는 인식하지 않습니다.) * 이미지 파일의 파일명은 영문과 숫자, 언더바 ( _ ), 하이픈 ( - )등의 일반적인 부호를 사용할 것을 권장합니다. (한글을 사용 할 경우 파일명 표시가 올바르지 않을 수 있습니다.) * 전체이미지, 전체이미지+동영상, 전체이미지+오디오를 혼용해서 제작할 경우 이미지 파일은 각 레이아웃의 권장사항을 따르면 됩니다. * 동영상과 오디오 첨부는 ZIP 불러오기 완료 후 해당 쪽으로 가서 레이아웃을 변경하고 첨부하면 됩니다.
테두리 설정 테두리 있음 테두리 없음 테두리 설정은 전체이미지로 첨부된 이미지의 테두리를 있음/없음으로 선택하는 기능입니다. 2013, KAKAO & podotree 5
테두리 설정 테두리 설정 전체이미지, 전체이미지+동영상, 전체이미지+오디오의 레이아웃에서 이미지를 첨부하면 하단에 전체이미지 추가 설정이 나타납니다. 01. 전체이미지에 테두리를 적용합니다. 02. 전체이미지에 테두리를 제거합니다. 03. 전체이미지가 첨부된 모든쪽을 찾아서 현재 쪽의 테두리 상태를 적용합니다. <주의!> 테두리 없음으로 설정하면 이미지의 아랫부분이 약간 잘리게 됩니다. 잘리는 부분에 텍스트가 포함되어 있지 않도록 주의하시기 바랍니다. 01 02 03 테두리 없음으로 설정시 이미지 크기 전체이미지, 전체이미지+동영상 : 720 x 1098 / 전체이미지 + 오디오 : 720 x 1002 * 테두리 설정은 전체이미지, 전체이미지+동영상, 전체이미지+오디오의 레이아웃에만 적용됩니다. 2013, KAKAO & podotree 6
크게보기 버튼 위치선택 01 02 03 01. 체크하면 하단에 버튼위치를 선택 할 수 있는 옵션이 나타납니다. 02. 크게보기 버튼의 위치를 선택합니다. 03. 크게보기가 체크된 모든 전체이미지를 찾아서 현재 쪽의 버튼위치를 적용합니다. * 크게보기 버튼 위치선택은 전체이미지, 전체이미지+오디오의 레이아웃에만 적용됩니다. (전체이미지+동영상은 크게보기 설정이 없습니다.)
목차 p. 7 개요 p. 8 폰트 설정 p. 11 표지만들기 p. 14 레이아웃별 특징 p. 32 동영상, 오디오 인코딩 안내 p. 36 크게보기 & 더보기 p. 41 PDF 불러오기 & PDF 제작 안내 p. 50 앱에서 보기
개요 페이지 상품 1편에 대한 전체 용량 전체 제한 쪽수 : 표지 + 200쪽 전체 제한 용량 : 300MB 미디어 파일 첨부 형식 이미지 : JPG, PNG / 5MB 이내 동영상 : MP4 (h264, AAC) 오디오 : MP4 (AAC) * 페이지 에디터는 크롬(Chrome) 브라우저 사용을 권장합니다.
폰트 설정
폰트 설정 페이지 에디터 페이지 에디터 (윈도우) (Mac) 페이지파트너 앱 나눔고딕 나눔고딕 나눔고딕 나눔고딕 나눔명조 나눔명조 나눔명조 나눔명조 선택안함 (기존 방식) 윈도우 OS 기본 Mac OS 기본 해당 모바일 기기의 (돋움) (애플 고딕) 기본 폰트 새롭게 제작하는 상품은 [나눔고딕]이 기본으로 설정되어있습니다. 페이지 에디터와 모바일기기에 동시에 적용되는 [나눔고딕]과 [나눔명조]를 권장합니다. [선택안함]은 에디터와 모바일 기기에 따라 서로다른 폰트로 보여지기 때문에 권장하지 않습니다. 주의사항 * 선택한 폰트는 모든 쪽에 일괄적용 됩니다. * 폰트 변경시 한쪽에 입력가능한 텍스트의 양, 줄나뉨이 달라질 수 있습니다. * [선택안함]은 추후 옵션에서 제외될 예정입니다.
폰트 설정 변경하기를 누르면 원하는 폰트로 바꿀수 있습니다.
표지 만들기
표지 만들기 표지 만들기 01 02 03 04 01. 제목, 저자명 입력 02. 제목과 저자명을 표시하거나 감출 수 있습니다. 03. 표지 이미지 첨부 영역 04. 미리보기 영역 05. 새로운 쪽을 추가함 표지 이미지 첨부 안내 파일 형식 : JPG, PNG 제한 용량 : 5MB 이하 권장 크기 : 가로 720px, 세로 1120px 05 * <가로 9 : 세로 14>의 비율보다 세로가 짧으면 하단에 여백이 발생합니다. 하단에 여백이 생기지 않도록 주의하시기 바랍니다.
표지 만들기 720 x 1120 (원본 이미지) 페이지 에디터 미리보기 화면 480 x 800 (갤럭시 S2 등) 720 x 1280 (갤럭시 S3 등) 첨부된 이미지는 모바일 기기의 화면비율에 상관없이 에디터 미리보기 화면과 동일하게 보여집니다. 표지 이미지의 권장 사이즈는 가로 720px, 세로 1120px 입니다. 만약 사이즈를 작게 넣을 경우에도 540 x 840, 450x700.. 등으로 <가로 9 : 세로 14>의 비율을 꼭 지켜야 합니다. 2013, KAKAO & podotree 15
내용 만들기 (레이아웃별 특징)
내용 만들기 내용 만들기 03 05 01 02 04 06 07 09 10 11 12 08 13 01. 레이아웃 변경 버튼 02. 폰트 변경하기 버튼 03. 모든쪽에 적용된 폰트가 표시됨 04. 추가된 목차를 확인 05. 텍스트를 입력하면 현재 쪽이 목차에 추가 됨 06. 이미지, 동영상, 오디오 첨부 영역 07. 텍스트 입력 필드 08. 미리보기 영역 09. 새로운 쪽을 추가함 10. PDF 불러오기 11. ZIP 불러오기 12. 현재 보고있는 쪽을 삭제함 13. 현재 보고있는 쪽을 다른 쪽으로 이동함 14. 모든쪽의 용량 / 전체 제한 용량 14
레이아웃 페이지 에디터에는 총 8개의 레이아웃이 있으며 쪽 단위로 선택 할 수 있습니다. 해당 쪽의 내용과 성격에 따라 적합한 레이아웃을 선택하세요.
이미지 + 텍스트 이미지 + 텍스트 레이아웃은 이미지와 텍스트를 동시에 넣을 때 사용합니다. 이미지는 상단에 텍스트는 하단에 위치되며 이미지의 비율에 따라 하단에 입력 가능한 텍스트의 양이 달라집니다. 그러므로 이미지를 먼저 첨부한 후에 텍스트를 작성하는 것을 권장합니다. 이미지 첨부 안내 파일 형식 : JPG, PNG / 제한 용량 : 5MB 이하 / 권장 크기 : 가로 720px
이미지 + 텍스트 텍스트가 입력 영역을 벗어나면 미리보기 화면 하단에 경고 문구가 나타납니다. 이때는 경고 문구가 사라질 때까지 영역 밖으로 벗어난 부분의 텍스트를 지운 후 이어지는 내용을 다음쪽에 작성하면 됩니다.
이미지 + 텍스트 첨부된 원본 이미지 에디터 미리보기 화면 이미지의 세로 비율이 하단에 텍스트영역이 남지 않을 정도로 긴 경우는 텍스트 영역 확보를 위해 이미지의 하단 부분을 자동으로 잘라냅니다. * 크게보기를 선택하면 잘라낸 부분을 모두 볼 수 있습니다. (크게보기 & 더보기 참고) 2013, KAKAO & podotree 21
전체 이미지 전체이미지 레이아웃은 전체 영역을 이미지로 채울 때 사용합니다. 전체 이미지 첨부 안내 파일 형식 : JPG, PNG / 제한 용량 : 5MB 이하 / 권장 크기 : 가로 720px, 세로 1120px * <가로 9 : 세로 14>의 비율보다 세로가 짧으면 하단에 여백이 발생하며, 세로가 길면 하단부분이 자동으로 잘리게 됩니다. * 하단에 여백이 생기지 않아야 하며, 이미지에 텍스트가 포함된 경우 잘리지 않아야 합니다.
전체 이미지 720 1120 720 x 1120 (원본 이미지) 페이지 에디터 미리보기 화면 480 x 800 (갤럭시 S2 등) 720 x 1280 (갤럭시 S3 등) 전체이미지 레이아웃에 첨부하는 이미지의 권장 크기는 720 x 1120 <가로 9 : 세로 14> 입니다. * 권장 크기의 비율보다 세로가 짧으면 하단에 여백이 발생하며, 세로가 길면 하단부분이 자동으로 잘리게 됩니다. * 하단에 여백이 생기지 않아야 하며, 이미지에 텍스트가 포함된 경우 잘리지 않아야 합니다. 2013, KAKAO & podotree 23
동영상 + 텍스트 동영상 + 텍스트 레이아웃은 동영상과 텍스트를 동시에 넣을 때 사용합니다. 동영상의 스크린샷은 상단에 텍스트는 하단에 위치되며 텍스트가 영역을 벗어나지 않도록 주의해야 합니다. 동영상 첨부 안내 파일 형식 : MP4 (H.264, AAC) * 인코딩 안내에 따른 동영상을 첨부해야 합니다. * 페이지파트너 앱에서 동영상이 올바르게 재생 되는지 꼭 확인 해보시기 바랍니다.
동영상 + 텍스트 동영상 첨부 전 동영상 첨부 후 동영상이 첨부된 후 스크린샷 첨부를 누르면 직접 선택한 이미지로 스크린 샷을 대체 할 수 있습니다.
텍스트 전체 텍스트 레이아웃은 전체 영역을 텍스트로 채울 때 사용합니다. 텍스트가 영역을 벗어나지 않도록 주의해야 합니다.
전체 이미지 + 동영상 전체 이미지 + 동영상 레이아웃은 전체 이미지와 동영상을 동시에 넣을 때 사용합니다. 자유롭게 꾸민 이미지를 배경으로 깔고 그 위에 동영상 재생 버튼을 원하는 위치에 올려 놓는 방식입니다. 전체 이미지 첨부 안내 파일 형식 : JPG, PNG / 제한 용량 : 5MB 이하 / 권장 크기 : 가로 720px, 세로 1120px 동영상 첨부 안내 파일 형식 : MP4 (H.264, AAC) * 인코딩 안내에 따른 동영상을 첨부해야 합니다. * 페이지파트너 앱에서 동영상이 올바르게 재생 되는지 꼭 확인 해보시기 바랍니다.
전체 이미지 + 동영상 01 02 03 04 01. 아무것도 첨부하지 않은 상태 02. 전체 이미지를 첨부합니다. 03. 동영상을 첨부하면 재생버튼이 생겨나며 이를 드래그 하면 원하는 곳으로 이동할 수 있습니다. 04. 아이콘을 각각 클릭하면 버튼위치의 가로와 세로를 가운데로 맞출 수 있습니다.
전체 이미지 + 오디오 전체 이미지 + 오디오 레이아웃은 전체 이미지와 오디오를 동시에 넣을 때 사용합니다. 전체 이미지 첨부 안내 파일 형식 : JPG, PNG / 제한 용량 : 5MB 이하 / 권장 크기 : 가로 720px, 세로 1032px 오디오 첨부 안내 파일 형식 : MP4 (AAC) * 인코딩 안내에 따른 오디오 파일을 첨부해야 합니다. * 페이지파트너 앱에서 오디오 파일이 올바르게 재생 되는지 꼭 확인 해보시기 바랍니다.
전체 이미지 + 오디오 01 02 03 04 01. 아무것도 첨부하지 않은 상태 02. 전체 이미지를 첨부합니다. 03. 오디오를 첨부합니다. 04. 첨부한 오디오의 재생시간을 확인 할 수 있습니다.
전체 이미지 + 오디오 720 1032 720 x 1120 (원본 이미지) 페이지 에디터 미리보기 화면 480 x 800 (갤럭시 S2 등) 720 x 1280 (갤럭시 S3 등) 전체이미지 + 오디오 레이아웃에 첨부하는 이미지의 권장 크기는 720 x 1032 입니다. * 권장 크기의 비율보다 세로가 짧으면 하단에 여백이 발생하며, 세로가 길면 하단부분이 자동으로 잘리게 됩니다. * 하단에 여백이 생기지 않아야 하며, 이미지에 텍스트가 포함된 경우 잘리지 않아야 합니다. 2013, KAKAO & podotree 31
텍스트 + 오디오 텍스트 + 오디오 레이아웃은 텍스트와 오디오를 동시에 넣을 때 사용합니다. * 텍스트가 영역을 벗어나지 않도록 주의해야 합니다. 오디오 첨부 안내 파일 형식 : MP4 (AAC) * 인코딩 안내에 따른 오디오 파일을 첨부해야 합니다. * 페이지파트너 앱에서 오디오 파일이 올바르게 재생 되는지 꼭 확인 해보시기 바랍니다.
이미지 + 텍스트 + 오디오 이미지 + 텍스트 + 오디오 레이아웃은 이미지, 텍스트, 오디오를 동시에 넣을 때 사용합니다. * 텍스트가 영역을 벗어나지 않도록 주의해야 합니다. 이미지 첨부 안내 파일 형식 : JPG, PNG / 제한 용량 : 5MB 이하 / 권장 크기 : 가로 720px 오디오 첨부 안내 파일 형식 : MP4 (AAC) * 인코딩 안내에 따른 오디오 파일을 첨부해야 합니다. * 페이지파트너 앱에서 오디오 파일이 올바르게 재생 되는지 꼭 확인 해보시기 바랍니다.
동영상, 오디오 인코딩 안내
동영상, 오디오 인코딩 안내 곰 인코더 사용시 출력 설정 안내 01. [mp4 ] - PSP, ipod, 디카 및 핸드폰용을 선택 01 02. MPEG-4 AVC/H.264를 선택 03. [1PASS-VBR] 비디오 품질을 기준으로 인코딩 한번 수행을 선택 03 02 04. 키프레임 간격 "1" sec로 설정 05. 오디오 코덱을 MPEG-4 Audio, AAC로 설정 06. 미디어 파일 정보를 파일 앞부분에 저장하기를 체크 (중요!) 04 07. H.264 Baseline Profile@Level 1.3/3.0으로 제한을 체크 (중요!) 08. 3.0으로 선택 05 * 오디오 파일 (MP3,WAV 등)의 경우 1번,5번, 6번의 내용만 해당됩니다. * 인코딩 완료된 파일 확장자는 비디오, 오디오 모두 MP4 입니다. 07 06 08 * 원본 오디오 파일을 인코더에 추가하려 할 때 오디오 파일들이 보이지 않을 때에는 파일 형식을 미디어 파일에서 [모든 파일]로 바꾸면 됩니다. * 곰 인코더 캡쳐화면
동영상, 오디오 인코딩 안내 영상 크기 관련 설정 동영상의 크기가 1280 이하일 경우 - 크기를 [변경 안함] 그대로 둡니다. 가로가 긴 동영상의 가로길이가 1280 초과일 경우 - 크기를 [가로 폭 맞춤]에 1280을 입력합니다. 세로가 긴 동영상의 세로길이가 800 초과일 경우 - 크기를 [세로 폭 맞춤]에 800을 입력합니다. 동영상의 크기는 1280(HD)까지를 지원합니다. 단, 저사양 모바일 기기에서는 HD급 동영상이 오동작을 일으킬 수 있으니 고화질이 필요한 동영상이 아니라면 긴축의 길이를 800 이하가 되도록 합니다. * 권장 크기 및 출력 설정 안내는 추후 변경 될 수 있습니다. * 곰 인코더 캡쳐화면
동영상, 오디오 인코딩 안내 프리셋 파일 이용하기 03 카카오 페이지에서 배포한 곰 인코더 용 프리셋 파일을 다운 받으면 출력 설정이 저장되어 있으므로 좀더 간편하게 인코딩 할 수 있습니다. 프리셋 파일 다운로드 링크 http://goo.gl/ueohw 01. 빠른 설정 추가를 클릭 02. 빠른 설정 파일을 추가를 눌러 다운 받은 프리셋 파일을 선택 03. 빠른 설정에서 추가된 프리셋 파일을 선택 * 프리셋 파일은 추후 변경 될 수 있습니다. 02 01 * 곰 인코더 캡쳐화면
크게보기 & 더보기
크게보기 표지를 제외하고 에디터를 통해 첨부된 모든 이미지는 크게보기를 할 수 있습니다. 이미지 첨부 후 크게보기를 누르면 아이콘이 생성됩니다.
크게보기 페이지파트너 앱에서 아이콘을 누르면 첨부된 이미지가 전체 영역에 보여지게 되며 이를 확대하여 볼 수 있습니다. 2013, KAKAO & podotree 40
더보기 레이아웃과 상관없이 모든 쪽에는 더보기를 추가 할 수 있습니다. (표지 제외) 더보기는 해당 쪽에 관련있는 내용을 텍스트로만 입력할 수 있으며, 스크롤이 허용됩니다.
더보기 페이지파트너 앱에서 하단에 더보기 아이콘을 누르면 더보기에 입력된 텍스트를 볼 수 있습니다.
PDF 불러오기 & PDF 제작 안내
PDF 불러오기 PDF 문서를 페이지 에디터로 불러오면 전체 이미지 레이아웃으로 각각의 쪽으로 나뉘어 들어옵니다. PDF 파일 첨부 안내 파일 형식 : PDF / 제한 쪽수 : 200쪽 (제작된 쪽이 한 쪽도 없을 때를 기준) / 문서 크기 : 가로 564px, 세로 877px <가로 9 : 세로 14>
PDF 제작 안내 564 877 564 x 877 (원본 PDF) 페이지 에디터 미리보기 화면 480 x 800 (갤럭시 S2 등) 720 x 1280 (갤럭시 S3 등) PDF 문서의 권장 크기는 564 x 877 <가로 9 : 세로 14> 입니다. * 권장 크기의 비율보다 세로가 짧으면 하단에 여백이 발생하며, 세로가 길면 하단부분이 자동으로 잘리게 됩니다. * 하단에 여백이 생기지 않아야 하며, PDF 문서에 텍스트가 포함된 경우 잘리지 않아야 합니다. 2013, KAKAO & podotree 45
PDF 제작 안내 564 808 69 564 x 877 (원본 PDF) 페이지 에디터 미리보기 화면 480 x 800 (갤럭시 S2 등) 720 x 1280 (갤럭시 S3 등) 오디오와 텍스트를 함께 사용하고자 하는 경우 하단 69px 만큼이 오디오 재생영역으로 가려지게 됩니다. * 텍스트가 오디오 재생 영역에 가려지지 않아야 합니다.
PDF 제작 안내 564 877 564 x 877 (원본 PDF) 페이지 에디터 미리보기 화면 480 x 800 (갤럭시 S2 등) 720 x 1280 (갤럭시 S3 등) 이미지만 채울시에는 PDF 문서 전체의 영역을 채우도록 합니다. 2013, KAKAO & podotree 47
PDF 제작 안내 #FBFBFB R:251 G:251 B:251 #FBFBFB PDF 문서의 배경색 PDF 불러오기 후 자동으로 생성되는 테두리(margin)의 컬러는 #FBFBFB (R:251 G:251 B:251) 입니다. PDF 문서 안의 배경색을 #FBFBFB로 설정하면 배경과 테두리(margin)가 자연스럽게 일치 됩니다. * 테두리(margin)의 컬러는 추후 변경될 수 있습니다.
PDF 제작 안내 PDF 불러오기 후 동영상이나 오디오를 첨부할 쪽이 있다면 레이아웃 변경을 눌러 전체이미지 + 동영상이나 전체이미지 + 오디오로 레이아웃을 변경하면 됩니다.
PDF 제작 안내 * 파워포인트 내보내기 옵션 * 애플 키노트 내보내기 옵션 PDF 내보내기 주의사항 PDF 전문 제작 툴에서 PDF 문서로 내보내기 할때 슬라이드 주변에 테두리, 날짜 포함 등등 모든 옵션을 해제하고 이미지는 최상으로 설정합니다. * 여러장의 PDF문서를 제작하기 이전에 안내에 따라 샘플을 제작하여 페이지파트너 앱에서 어떻게 보이는지 확인 후 제작하기를 권장합니다.
PDF 제작 안내 PDF 불러오기 할때 이미지가 보이지 않는 문제에 대한 안내 내보내기 옵션이 좀더 자세하게 되어있는 인디자인과 같은 툴에서는 이미지의 압축 방식을 직접 선택 할 수 있는데 JPEG 2000을 선택할 경우 페이지 에디터에서 이미지가 표시되지 않을 수 있습니다. 압축방식은 JPEG을 권장합니다. * 페이지 에디터는 JPEG 2000 형식의 PDF 파일을 지원하지 않습니다. * 어도비 인디자인 내보내기 옵션
앱에서 보기 (페이지파트너 앱으로 확인하기)
앱에서 보기 앱에서 보기 버튼을 눌러 제작된 모든 내용을 페이지파트너 앱에서 확인해야 합니다. 텍스트가 잘려나갔음, 전체 이미지 하단에 여백이 있음, 동영상과 오디오가 제대로 재생이 되지 않음.. 등의 상황은 상품등록시 반려사유가 될 수 있습니다. 저자의 의도에 맞게 모든 내용이 페이지파트너 앱에서 올바르게 보여지는지를 확인 하시기 바랍니다.
KAKAO PAGE e-mail support@kakaopage.com 이 자료는 카카오페이지 서비스에 대한 이해를 돕기 위한 목적으로 제작된 카카오와 포도트리의 자산이므로 카카오와 포도트리의 허락없이 임의로 편집 혹은 배포하거나 다른 목적으로 사용할 수 없습니다.