(DAY33) 디자인 핸드오프, Annotation 기능 활용하기

 

안녕하세요 :) 

오늘은 제가 감기 기운이 있는지 으슬으슬 추워서 공부에 집중을 많이 못했습니다,,ㅜㅜ

그래서 프로토타이핑을 좀 대충하게 되더라구요...ㅜㅜ

체력관리 컨디션관리 해야하는데 말이죠,,, 모두들 감기 조심하세요 🥲

---

 

 

✏️오늘의 학습

디자인 핸드오프 알아보기

개발자와 소통하기 위한 문서(피그마) 만들기

실습 ) 앱서비스 선정 후 개발자가 이해할 수 있는 산출물 만들기 

 

 

📖오늘의 핵심

개발자를 다 믿으면 안된다. 내 디자인 의도가 명확히 전달되려면 프로토타이핑 기능+핸드오프 문서를 꼼꼼하게 구체적으로 제작해야 한다.

 

 

 

 

📝 수업 내용 메모장

 

디자인 핸드오프

디자인을 마치고 개발자 등에게 넘겨주는 것

 핸드오프 중요한 이유 top3

- 원활한 커뮤니케이션

- 디자인 의도 보존

- 개발 속도 향상

 

 

(Ant.design 사이트 보면서 설명해주심)

 

 

 

치수 기입 관련 피그마 플러그인

Designdoc

Measure

autoflow (화살표 생성, Shift 누른채로 시작/끝점 클릭하면 화살표 생김)

 

 

+해외 앱 앱소개페이지 레퍼런스 사이트

https://scrnshts.club/

Discover Scrnshts

 

피그마 개발자 모드 (Dev 기능)

Shift + D : 툴이 개발자모드로 바뀜 / 다시 Shift D 누르면 디자인모드로 돌아옴

 

 

 

 

실습 ) 앱서비스 선정 후 개발자가 이해할 수 있는 산출물 만들기 

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

 

💡 컨디션 난조로 인해 어떤 서비스로 작업해볼지 고민할 정신머리가 없어서 지금 사이드 프로젝트를 진행 중인 '잡플래닛' 앱으로 간략하게 진행했다..

 

실습 결과물

 

 

💡 피그마 내 어노테이션 Annotation 기능을 처음 써봤다.

코멘트 달듯이 바로바로 적어놓을 수 있는 좋은 기능인데, 막상 다 적고 이렇게 한 눈에 보니까...엄...정리가 안되어보인다. 디자인시스템과는 또 다른 방식이라 낯설었다. 이전 회사에서 웹 접근성 관련 가이드문서를 제작해본 경험이 있긴 한데, 그때 작성했던 가이드문서는 PDF형식이라 세로형으로 정리하는 느낌이었는데, 오늘 해본 이 작업은 피그마 파일 안에서 하는거라 정보를 어떤 식으로 구조화 해야하는지 살짝 헤맸다. 계속 작업하면서 '이렇게 하는게 맞나..?'하는 의문을 가졌다..ㅋㅋㅋㅋㅋㅋㅋㅋ 코치님 피드백을 얼른 받아봐야 감을 잡을 것 같다...