DAY+33 [ 프로토타입 2 ]

안녕하세요, 주-주스 입니다! 🍹

 

 

ପ(๑•̀ᴗ-♡ॢ)fෆr yෆu೨⋆✩

!!!³✺!~ 캠프 33일차  ~!✺!!!

๑❤‿❤๑

 

오늘은

프로토타입/ 피그마에서 프로토타입 기능을 활용/ 핸드오프 에 대하여 포스팅하겠습니다!|

---

 

---

 

---

디자인 핸드오프

완벽했던 디자인, 그런데...왜 이렇게 나왔죠?...

• 주인공: 지혜 - 5년 차 UX/UI 디자이너 요 개발자: 민수- 신입 프론트엔드 개발자
• 지혜는 한 달 동안 열심히 작업한 모바일 쇼핑 앱 디자인을 개발팀에 넘겼습니다.
  Figma에서 예쁘게 정리된 프로토타입과 스타일 가이드도 함께 전달했죠.
• 며칠 후, 개발이 거의 완료되었다는 소식을 듣고 기대에 찬 마음으로 결과물을 확인했는데...

"어....? 내가 디자인한 거랑 완전 다른데?"

• 버튼 크기가 다르고 색깔도 이상함
• 간격이 뒤죽박죽
• 인터랙션 애니메이션이 누락됨
• 모바일 반응형이 엉망

지혜는 당황해서 개발자인 민수에게 물었습니다.

지혜: "민수 씨, 제가 전달한 디자인이랑 다르게 구현된 부분이 많아요!"

•: 민수: "아...! 제가 받은 디자인 파일엔 정확한 간격이나 버튼 스타일이 없었어요.
그리고 애니메이션도 따로 설명이 없어서 기본값으로 넣었는데..."'

* 문제는 바로, 핸드오프'가 제대로 되지 않아서 발생함!

 

---

https://zeplin.io/

Zeplin

---

디자인 핸드오프

UXUI 디자인 핸드오프란?

핸드오프(Hand-off)란,

디자이너가 만든 U 디자인을 개발자가 구현할 수 있도록 전달하는 과정을 의미
이 과정에서 개발자는 정확한 디자인 정보를 받아야 하고, 그래야만 원활한 협업이 가능합니닷!

 

※ 핸드오프의 핵심 역할:

V 개발자가 디자인을 보고 그대로 구현할 수 있도록 상세한 정보 제공!

V 디자인 의도가 정확하게 전달되어 오류를 최소화!

✓ 개발팀과의 협업을 통해 더 빠르고 효율적인 개발 진행!

 

핸드오프가 제대로 되지 않으면 어떤 문제가 생길까?

제대로 전달되지 않으면 디자인과 다르게 구현되는 오류가 발생

 

핸드오프가 중요한 이유 TOP 3

1) 원활한 커뮤니케이션

• 디자이너와 개발자가 서로 같은 방향을 보고 일할 수 있도록 해줌

2) 디자인 의도 보존

• 원래 기획된 UVUX 경험이 그대로 구현될 수 있도록 보장

 

3) 개발 속도 향상

• 개발자가 추가 질문 없이 빠르게 개발을 진행할 수 있다

 

 

디자인 핸드오프

핸드오프 문서에 포함해야 할 필수 요소

Figma 핸드오프 문서 예시

= 프로토타입 링크: [Figma 링크]

= 화면별 주요 비 요소

= 로그인 버튼: Primary Color, Rounded 8px, Width: 100%
= 입력 필드: Border 1px, Radius 4px, Placeholder 텍스트 포함
= 네비게이션 바: 아이콘 크기 24px, Active 시 색상 변경

 

※ 디자인이 딱 맞게 개발되려면 정확한 간격 정보가 필요

✓ 그리드 시스템 설명

• 12 Grid 사용
• Column Width: 80px, Gutter: 16px

✓ 픽셀 단위 간격 정보

• 버튼과 텍스트 간 여백 8px
• 카드 간격 16px
• 섹션별 패딩 24px

* Figma 핸드오프 꿀팁!

"Inspect" 모드에서 개발자가 직접 픽셀 간격을 확인할 수 있도록 설정

Auto Layout을 활용하면 반응형 간격을 더 쉽게 전달할 수 있음

 

---

오늘의 실습 !

⭐️[최종 과제]

• 완성된 와이어프레임/프로토타입을 개발자가 이해할 수 있는 산출물로 전달한다.
• 화면별 디자인 스펙(색상, 폰트, 크기, 여백 등)과 플로우 설명을 문서화한다.

---

(1) 화면 정리 (제작 화면 정리)

= 서비스 앱 선정해서 클론(프로토타입) - 화면정리 위에 바! (+ 추가 설명이 필요 시 필요한 화면 캡처)

• 서비스 선정 후 프로토타입 제작 화면 정리 진행 (5페이지 이상)
• 프로토타입 화면 (+ 추가 설명이 필요 시 필요한 화면 캡처)
• 각 화면을 번호(#1 로그인 / #2 메인 / #3 상세 등)로 구분 (프레임명 또는 섹션으로 구분)

---

(2) 사용자 플로우 설명 (오토플로우) = 어떤식으로 진행되는지 작성

• 화면 간 이동 경로를 한 문장 요약으로 기록
• 예: “로그인 성공 시 → 메인 화면 이동 / 상품 클릭 시 → 상세 화면 이동”

---

(3) 어노테이션 기능 사용해서 작성하기

 

---

[33일차 소감❤️]

- 개발자와 함께 소통해야하는 실무에서 핸드오프의 중요성에 대해 깊게 배울 수 있었습니닷!! 세상이 좋아져서.. 오토액션이라는 것도 있고..Dev Mode 가 있어서 자세한 설명까지 표현될 수 있는 부분이 넘 효율적으로 보였습니다! 추가로 강조해야 하는 부분은 Annotation 부분으로 메모해두고 개발자와 소통할 수 있다는 것이 좋다고 생각했습니다! 오늘은 체력관리로.. 몸을 자주 쉬어서 과제 시간이 조금 촉박했지만 무사히 마무리했답니닷!! 내일도 파이팅!!!

= 오늘의 한 마디 =
- 밀크티가 먹고 싶어요~ ㅎ..