디자이너와 협업하는 방법 (핸드오프, 스펙 확인)

들어가며

디자이너와 개발자 사이에서 생기는 마찰의 대부분은 커뮤니케이션 문제다. 핸드오프 프로세스를 제대로 잡아두면 불필요한 오해와 재작업을 줄일 수 있다. 실무에서 겪은 상황 위주로 정리해둔다.

---

핸드오프란?

디자이너가 완성된 디자인을 개발자에게 넘기는 과정이다. 단순히 Figma 링크를 공유하는 게 아니라 개발에 필요한 모든 정보를 전달하는 과정이다.

좋은 핸드오프의 조건:
- 모든 화면 상태가 디자인되어 있다
- 스펙이 명확하게 정의되어 있다
- 에셋(이미지, 아이콘)이 export 가능하다
- 인터랙션과 애니메이션이 명시되어 있다
- 디자인 변경 시 개발자에게 알림이 간다

---

핸드오프 체크리스트

개발 시작 전에 디자이너에게 확인해야 할 항목들이다.

화면 완성도 확인

□ 모든 화면 상태가 있는가? (Default / Loading / Empty / Error)
□ 모바일 / 태블릿 / 데스크탑 반응형이 모두 있는가?
□ 다크모드 지원이 필요한가?
□ 접근성 고려가 되어 있는가? (색상 대비, 텍스트 크기 등)

컴포넌트 확인

□ 버튼 모든 상태가 있는가? (Default / Hover / Active / Disabled)
□ 폼 요소 상태가 있는가? (Default / Focus / Error / Disabled)
□ 재사용 컴포넌트가 Components 페이지에 정리되어 있는가?
□ 아이콘 라이브러리가 명시되어 있는가?

스타일 가이드 확인

□ 색상 팔레트가 정의되어 있는가?
□ 타이포그래피 시스템이 정의되어 있는가?
□ 간격 시스템 (spacing scale)이 정의되어 있는가?
□ 그림자, 보더 반경 등 공통 스타일이 있는가?

---

디자이너와 소통하는 방법

Figma 코멘트 활용

언제 쓰는가:
- 특정 요소에 대한 질문
- 구현 불가능한 부분 의견 전달
- 변경 요청

코멘트 작성 팁:
- 질문은 구체적으로 ("이 간격이 몇 px인가요?" O / "이거 어떻게 하나요?" X)
- 대안 제시 ("이 애니메이션은 성능 이슈가 있어서 fade 대신 slide로 변경해도 될까요?")
- 우선순위 표시 ("이번 스프린트 개발 전에 확인 부탁드립니다")

Slack에서 소통

좋은 질문 방식:
- Figma 링크 + 프레임 이름 명시
- 스크린샷 첨부
- 구체적인 질문

예시:
"로그인 화면 (Figma > Design > Login 프레임) 에서
비밀번호 찾기 버튼 탭 후 이동하는 화면이 없는데
추가 예정인가요? 아니면 이번 스프린트에서 제외인가요?"

---

자주 발생하는 갈등 상황과 해결 방법

상황 1: 구현하기 어려운 디자인

문제:
디자이너가 복잡한 애니메이션이나 비표준 레이아웃을 요구함

해결:
1. 왜 어려운지 기술적으로 설명
2. 동일한 UX를 제공하는 대안 제시
3. 공수 차이를 수치로 설명 (예: "원안은 3일, 대안은 0.5일")
4. 최종 결정은 PM/디자이너가 하도록

나쁜 대응:
"이거 구현 못해요" (이유 없이 거절)
"그냥 다르게 만들게요" (협의 없이 임의 변경)

상황 2: 개발 중 디자인 변경

문제:
개발이 70% 진행된 상태에서 디자인이 크게 바뀜

해결:
1. 변경 범위와 영향도 파악
2. 추가 공수를 PM에게 보고
3. 변경 이력을 Figma 코멘트나 Jira 이슈로 기록
4. 향후 핸드오프 프로세스 개선 제안

예방:
- 개발 시작 전 디자인 확정 여부 확인
- "이 디자인이 최종인가요?" 명시적으로 확인
- 주요 마일스톤에서 디자인 리뷰 세션 진행

상황 3: 스펙이 실제와 다른 경우

문제:
구현한 화면이 디자인과 미묘하게 다름

해결:
1. Dev Mode로 정확한 수치 재확인
2. 실제로 다른 부분 스크린샷 비교
3. 픽셀 퍼펙트가 필요한 부분과 허용 범위 협의

실무 팁:
모든 요소를 픽셀 퍼펙트로 구현하는 건 비효율적이다.
중요도에 따라 허용 범위를 팀 내에서 합의해두는 게 좋다.

상황 4: 디자인에 없는 케이스

문제:
개발 중 디자인에 없는 엣지 케이스 발견
(예: 텍스트가 너무 길 경우, 이미지 없는 경우 등)

해결:
1. Figma 코멘트로 케이스 공유
2. 디자이너와 처리 방식 협의
3. 임시 처리 후 디자인 나오면 반영

예시:
"상품명이 2줄 이상인 경우 어떻게 처리하나요?
ellipsis 처리할까요, 아니면 줄바꿈 처리할까요?"

---

효율적인 협업을 위한 팁

개발자가 먼저 할 수 있는 것들:
- Figma 파일 구조 파악하는 습관
- Dev Mode 적극 활용 (디자이너에게 질문 전에 먼저 확인)
- 변경 이력 꼼꼼히 확인
- 모호한 부분은 가정하지 말고 반드시 확인

디자이너에게 요청하면 좋은 것들:
- 컴포넌트 상태 완성도 높이기
- 디자인 변경 시 개발자에게 알림
- 스타일 가이드 문서화
- 핸드오프 전 자체 QA

---

정리

항목	핵심
핸드오프 체크리스트	개발 전 화면 상태, 컴포넌트, 스타일 가이드 확인
질문 방법	Figma 코멘트 활용, 구체적으로 질문
구현 어려운 디자인	이유 설명 + 대안 제시
디자인 변경	범위 파악 → 공수 보고 → 이력 기록
엣지 케이스	발견 즉시 디자이너와 협의
픽셀 퍼펙트	중요도에 따라 허용 범위 합의