상세페이지, 도구 없이 어디까지 만드나

상세페이지에서 시간을 먹는 것은 디자인이 아니라 사진과 문장입니다. 이미지 편집 도구를 다루지 못해도 사진 고르기·문장 쓰기·순서 잡기까지는 직접 끝납니다. 도구가 꼭 필요한 자리는 세 곳입니다 — 배경을 지우는 일, 글자를 사진 위에 얹는 일, 긴 이미지를 여러 장으로 나누는 일. 이 셋을 뺀 나머지가 전체 작업의 대부분을 차지합니다.

도구 없이 되는 것과 도구가 필요한 것은 무엇인가요

일	도구 없이 되나	드는 시간
쓸 사진 고르고 번호 붙이기	됩니다	2시간
칸마다 들어갈 문장 쓰기	됩니다	3~4시간
칸 순서 바꿔 보기	됩니다	1시간
사진을 네모로 자르고 밝기 맞추기	기본 사진 앱으로 됩니다	장당 5분
배경 지우기	도구가 필요합니다	장당 10~30분
사진 위에 글자 얹기	도구가 필요합니다	칸당 20분
긴 이미지를 여러 장으로 나누기	도구가 필요합니다	30분

위 세 줄이 전체 시간의 절반을 넘게 씁니다. 그러니 도구를 못 다룬다고 해서 시작을 미룰 이유가 없습니다. 도구가 필요한 아래 세 줄만 따로 떼어 맡기는 방식도 됩니다.

배경 지우기가 필요한 컷은 생각보다 적습니다. 흰 벽이나 흰 종이 위에서 찍은 사진은 밝기만 올려도 배경이 거의 흰색이 됩니다. 반드시 지워야 하는 것은 제품만 오려 다른 색 위에 얹을 때인데, 그런 칸이 두세 개를 넘지 않으면 그 칸만 따로 맡겨도 됩니다.

도구를 먼저 배우려다 시작이 몇 주 밀리는 경우가 많습니다. 순서를 바꿔서 도구 없이 되는 앞의 네 줄을 먼저 끝내면, 남은 일이 무엇인지가 그때 눈에 보입니다. 도구를 배울지 그 부분만 넘길지는 그다음에 정해도 늦지 않습니다.

초안은 무엇으로 만드나요

문서 편집기 하나면 됩니다. 상세페이지는 위에서 아래로 흐르는 화면이라 세로로 긴 문서와 모양이 같습니다.

• 문서를 세로로 길게 만들고 한 칸 분량마다 가로줄을 긋습니다
• 칸마다 세 줄을 적습니다 — 이 칸에서 하려는 말·들어갈 사진 파일 이름·화면에 보일 문장
• 사진은 이름만 적고 실제로 붙이지 않습니다. 붙이면 문서가 무거워지고 순서를 바꾸기 어렵습니다

칸 수는 여섯에서 열 사이가 다루기 좋습니다. 여섯보다 적으면 한 칸이 길어져 읽다가 멈추고, 열보다 많으면 아래쪽 칸은 거의 안 읽힙니다. 칸마다 하려는 말은 하나만 둡니다 — 한 칸에 두 가지를 넣으면 사진과 문장이 서로를 밀어냅니다.

이 문서가 곧 작업 지시서입니다. 나중에 도구로 조립할 때도, 이 부분만 맡길 때도 그대로 씁니다. 상세페이지 디자인에서 가장 오래 걸리는 것은 「무슨 말을 어떤 순서로 넣나」인데 그 답이 문서에 이미 적혀 있기 때문입니다.

문장은 칸마다 두세 줄이면 충분합니다. 길게 쓰면 이미지 안에서 글자가 작아지고, 작아지면 좁은 화면에서 안 읽힙니다. 길어진 문장은 글자를 줄이기보다 칸을 하나 늘리는 쪽이 낫습니다.

어떤 순서로 하나요

단계	하는 일	걸리는 시간
1	쓸 사진만 폴더 하나에 모으고 번호 붙이기	2시간
2	칸마다 세 줄씩 쓰기	3~4시간
3	칸을 위아래로 바꿔 보고 순서 확정	1시간
4	도구에서 이미지로 조립	반나절~1일
5	폭·형식·용량 맞춰 저장	30분
6	올려서 좁은 화면으로 확인	30분

3번에서 순서를 확정하기 전에는 4번으로 넘어가지 않습니다. 이미지로 만든 뒤 순서를 바꾸면 파일을 처음부터 다시 씁니다. 순서를 바꿔 보는 데 드는 1시간이 하루를 아낍니다.

1번에서 사진을 고르는 기준은 예쁜가가 아니라 무엇을 보여 주는가입니다. 전체 모양·크기를 가늠할 수 있는 것·쓰는 장면·가까이 본 마감, 이 네 가지가 한 장씩 있으면 나머지는 있으면 좋은 사진입니다. 폴더에 모을 때 01부터 번호를 붙이면 문서에서 이름으로 부르기 쉬워집니다.

저장할 때 무엇을 맞추나요

세 가지만 봅니다 — 폭·형식·용량.

• 폭은 가로 860~1000px 사이로 잡으면 대부분의 화면에서 무리가 없습니다. 채널마다 허용 폭이 다르므로 올리기 전에 그 채널의 안내를 한 번 확인합니다
• 형식은 사진이 많은 칸은 JPG, 글자와 선이 많은 칸은 PNG. 한 장에 섞으면 글자 가장자리가 번져 보입니다
• 세로가 길면 1000~1500px 단위로 잘라 여러 장으로 올립니다. 한 장이 너무 길면 늦게 뜨고 중간에 흰 칸이 보입니다
• 장당 용량은 300KB 안쪽을 기준으로 잡습니다

저장한 뒤에는 실제로 올려서 봅니다. 컴퓨터 화면에서 크게 보이던 글자가 좁은 화면에서는 절반 크기로 줄어듭니다. 기준은 하나입니다 — 손에 든 화면에서 확대하지 않고 읽히면 통과입니다. 안 읽히면 글자를 키우기보다 문장을 줄이는 쪽이 낫습니다.

어디까지 하고 멈추나요

이런 일이 나오면	이유
아이콘이나 도해를 그려야 할 때	선을 그리는 일은 도구 사용법이 아니라 그리는 일입니다
인쇄가 붙을 때	화면용 RGB와 인쇄용 CMYK는 색이 달라 다시 만듭니다
같은 틀을 20개 넘게 반복할 때	손으로 반복하면 칸마다 크기와 여백이 어긋납니다
없는 사진이 필요할 때	촬영이 필요한 컷은 편집으로 만들어지지 않습니다
같은 내용을 여러 채널에 맞춰 다시 만들 때	채널마다 폭과 규격이 달라 판을 따로 관리해야 합니다

멈추더라도 2번에서 만든 문서는 그대로 넘어갑니다. 칸 순서와 문장이 정해져 있으면 남은 일은 조립뿐이라 시간이 짧아지고 시안이 오갈 일도 줄어듭니다. 반대로 문서 없이 사진만 넘기면 무슨 말을 어떤 순서로 넣을지 정하는 일부터 다시 시작합니다.

오늘 할 일

쓸 사진을 폴더 하나에 모으고 01부터 번호를 붙이십시오. 그다음 문서를 열어 칸을 여섯 개 긋고, 각 칸에 「이 칸에서 하려는 말」 한 줄씩만 적습니다. 40분이면 끝나고, 이 여섯 줄이 상세페이지의 뼈대가 됩니다.