디자이너가 완성한 시안을 퍼블리셔에게 전달했는데, 정확한 여백 값이나 색상 코드가 표기되어 있지 않아 퍼블리셔가 대략 눈으로 짐작해 코딩했습니다. 완성된 화면은 시안과 미묘하게 달랐고, 디자이너는 “이게 아닌데”라며 몇 차례나 수정을 요청했습니다. 결국 같은 화면을 세 번이나 다시 만들었습니다. 이 문제는 디자인 실력이나 코딩 실력의 문제가 아니라, 디자인 파일에서 코딩으로 넘어가는 과정에 표준이 없었기 때문입니다.
디자인과 퍼블리싱 사이, 왜 항상 여기서 사고가 나는가
디자인 시안은 이미지처럼 보이지만, 실제로는 그 안에 색상값, 여백, 폰트 크기, 정렬 기준 같은 정보가 함께 담겨 있어야 합니다. 이 정보가 명확히 전달되지 않으면 다음과 같은 문제가 생깁니다.
- 디자이너가 의도한 정확한 여백 대신 퍼블리셔가 눈짐작으로 값을 정함
- 같은 디자인 요소(버튼, 카드)가 페이지마다 다른 크기로 코딩됨
- 디자이너가 사용한 폰트가 퍼블리셔 환경에는 없어 다른 폰트로 대체됨
- 반응형(모바일) 상태의 디자인이 없어 퍼블리셔가 임의로 배치를 결정
이런 문제는 “퍼블리셔가 꼼꼼하지 못해서”가 아니라, 전달되는 자산과 정보 자체가 불완전해서 발생합니다.
디자인 핸드오프에 반드시 포함해야 할 자산
| 자산 | 포함 내용 |
|---|---|
| 디자인 원본 파일 | 레이어가 분리된 편집 가능 형식의 전체 화면 |
| 색상 가이드 | 주요 색상의 정확한 코드값(배경, 텍스트, 강조색 등) |
| 폰트 정보 | 사용된 폰트명, 크기, 줄 간격, 굵기 단계 |
| 간격·여백 값 | 요소 간 여백, 내부 패딩의 정확한 수치 |
| 아이콘·이미지 원본 | 실제 사용 크기 이상의 고해상도 원본 또는 벡터 파일 |
| 반응형 화면 | 모바일·태블릿 등 주요 해상도별 디자인 |
| 인터랙션 설명 | 클릭·호버 시 변화, 애니메이션 방향 등 동작 설명 |
이 7가지가 갖춰져 있으면 퍼블리셔가 추측할 여지가 크게 줄어들고, 완성된 결과물이 디자인 의도와 훨씬 가깝게 나옵니다.
반응형 디자인, 몇 개 화면까지 준비해야 하는가
모바일 화면을 아예 준비하지 않고 “PC 화면 기준으로 알아서 줄여달라”고 요청하는 경우가 흔한데, 이는 이후 반응형 최적화 단계에서 큰 혼란을 만듭니다. 최소한 아래 3개 구간의 주요 화면은 디자인해두는 것을 권장합니다.
- PC 화면 — 기본 레이아웃과 여백 기준
- 모바일 화면 — 요소 재배치, 메뉴 축소 방식(예: 햄버거 메뉴)
- 태블릿 화면 — PC와 모바일 사이의 전환 기준(선택적으로, 최소 주요 페이지만이라도)
전체 페이지를 다 반응형으로 디자인할 여유가 없다면, 최소한 메인 페이지와 가장 복잡한 레이아웃을 가진 페이지만이라도 모바일 시안을 준비하세요. 나머지는 그 기준을 참고해 퍼블리셔가 일관되게 적용할 수 있습니다.
디자인 시스템으로 전달하면 효율이 크게 오른다
페이지 하나하나를 개별적으로 디자인해서 전달하는 대신, 반복되는 요소(버튼, 카드, 입력창 등)를 디자인 시스템으로 먼저 정리해 전달하면 다음과 같은 효과가 있습니다.
- 같은 버튼이 여러 페이지에서 항상 동일한 스타일로 코딩됨
- 디자인 변경이 필요할 때 시스템의 기준값만 바꾸면 전체 페이지에 일괄 반영 가능
- 새로운 페이지를 추가할 때도 기존 요소를 재사용해 작업 속도가 빨라짐
디자인 시스템은 대기업만의 것이 아닙니다. 중소 규모 프로젝트도 색상, 버튼, 폼 요소 정도만 표준화해두면 퍼블리싱 품질과 속도가 눈에 띄게 개선됩니다.
디자이너와 퍼블리셔 사이 소통, 이렇게 구조화하라
파일만 던져주고 끝나는 것이 아니라, 아래 절차로 소통하면 오해를 줄일 수 있습니다.
- 핸드오프 미팅 — 디자인 의도, 인터랙션, 우선순위를 직접 설명하는 짧은 미팅
- 1차 퍼블리싱 후 중간 확인 — 대표 페이지 1~2개를 먼저 완성해 디자이너가 확인
- 기준 확정 — 중간 확인에서 합의된 스타일 기준을 다른 페이지에도 동일 적용
- 전체 완성 후 최종 검수 — 디자이너가 전체 페이지를 디자인 시안과 나란히 비교
특히 2번 단계(대표 페이지 먼저 확인)를 건너뛰고 전체를 다 만든 뒤에 확인하면, 문제가 발견됐을 때 수정 범위가 훨씬 커집니다.
외주 디자이너와 외주 퍼블리셔가 다른 회사일 때
디자인과 퍼블리싱을 각각 다른 업체에 맡기는 경우, 아래를 계약 단계에서 명확히 해야 합니다.
- 디자인 완료 기준에 “퍼블리싱 가능한 형태의 자산 전달”을 포함
- 디자인 변경이 필요할 때 누가 비용을 부담하는지(디자인 문제 vs 퍼블리싱 문제 구분)
- 두 업체 간 직접 소통이 가능한 창구를 마련(발주사를 거치면 전달 지연·왜곡 발생)
발주사가 중간에서 메시지를 전달하는 역할만 하면 정보가 누락되기 쉽습니다. 가능하다면 디자이너와 퍼블리셔가 최소 1회는 직접 소통하는 자리를 만드는 것이 효과적입니다.
핸드오프 품질을 사전에 확인하는 방법
디자인 시안을 받았다면, 퍼블리셔에게 넘기기 전 발주사도 아래를 간단히 확인해보세요.
- 주요 색상이 몇 가지로 정리되어 있는가(색상이 너무 많고 일관성이 없다면 재정리 필요)
- 버튼·카드 등 반복 요소의 스타일이 페이지마다 통일되어 있는가
- 모바일 화면이 최소한 대표 페이지 기준으로는 준비되어 있는가
이 정도만 확인해도 퍼블리싱 단계에서 발생할 혼란을 상당 부분 예방할 수 있습니다. 프로젝트 진행 중이라면 무료 견적요청을 통해 현재 디자인 자산 상태를 점검받아보는 것도 방법입니다.
자주 묻는 질문 (FAQ)
디자인 도구에서 바로 코드를 추출해서 쓰면 되지 않나요? +
일부 값(색상, 크기)은 추출이 가능하지만, 실제 코드 구조나 반응형 동작까지 그대로 쓸 수 있는 경우는 드뭅니다. 추출된 값은 참고 자료로 활용하고, 실제 구현은 퍼블리셔가 웹 표준에 맞게 다시 작성하는 것이 일반적입니다.
디자인 시스템을 만들 여유가 없는 소규모 프로젝트는 어떻게 하나요? +
전체 시스템을 만들기보다, 색상 3~5가지와 버튼·입력창 스타일 정도만 먼저 정리해도 충분한 효과가 있습니다. 페이지 수가 적더라도 반복되는 요소의 일관성을 지키는 것이 핵심입니다.
모바일 디자인 없이 퍼블리싱을 진행하면 어떤 문제가 생기나요? +
퍼블리셔가 임의로 레이아웃을 재배치하게 되어, 디자이너가 의도한 우선순위(어떤 정보를 먼저 보여줄지)가 반영되지 않을 수 있습니다. 완성 후 디자이너의 재검토와 수정 요청이 늘어나 오히려 일정이 지연되는 경우가 많습니다.
완성된 페이지가 시안과 다르면 누구 책임인가요? +
전달된 자산과 정보가 충분했는지가 판단 기준이 됩니다. 정확한 값과 반응형 화면이 전달됐는데도 다르게 만들어졌다면 퍼블리싱 쪽 문제이고, 애초에 정보가 불충분했다면 핸드오프 과정의 문제로 봐야 합니다.
디자이너가 퍼블리싱 결과를 확인하는 시점은 언제가 좋은가요? +
전체가 다 끝난 후가 아니라, 대표 페이지 1~2개가 완성된 시점에 먼저 확인하는 것이 좋습니다. 이 시점에서 스타일 기준을 확정하면 나머지 페이지 작업에서 반복되는 수정 요청을 크게 줄일 수 있습니다.