1. 와이어프레임

1. 협업을 위한 스타일 가이드 정하기

와이어프레임을 시작하기에 앞서서 가장 먼저 신경썼던 것은 스타일 가이드였다. 단독으로 작업하는 프로젝트가 아니라 3명이서 진행하는 팀 프로젝트인 만큼, 스타일 가이드와 네이밍 컨벤션이 명확하게 잡혀져야 추후 작업이 빨라질 것이라는 판단이었다. 멘토님과 디자이너 분 역시 스타일 가이드를 먼저 정하라는 조언을 주셔서 스타일 가이드를 잡는 것을 최우선 순위로 작업하였다.

전체적인 스타일 가이드의 경우 피그마 커뮤니티에 있는 Material 3 Design Kit을 사용하여 작업하였다.

Figma

Created with Figma

www.figma.com

타이포그라피의 경우 같은 Material Kit 여도 영어와 일본어가 다른 폰트로 구성되어 있는 것을 발견하였다. 영어의 경우 Roboto 폰트가, 일본어의 경우 Noto Sans JP 폰트가 사용되었다. 우리 서비스의 주 언어는 일본어이기 때문에 Noto Sans JP으로 작업하였다. 또한 모바일 서비스이기 때문에 Display 사이즈는 사용하지 않았다.

2. 유지보수를 위한 컴포넌트 만들기

피그마의 꽃인 컴포넌트! 컴포넌트를 잘 사용해야 와이어프레임 작업도 빠르게 진행할 수 있고, 유지보수도 편하게 작업할 수 있다. 원활한 유지보수 및 프로토타이핑을 제작을 위해 컴포넌트화시켜서 작업하였다.

3. 네이밍 컨벤션 정하기

프레임 이름의 경우 ‘기능명_상세페이지(기능)명’로 작업하었다. 각 기능명과 상세페이지명는 대문자로 시작한다.

4. 와이어프레임 결과

현재 와이어프레임은 모든 페이지를 완성한 상태이다. 협업을 위한 스타일 가이드 및 네이밍 컨벤션을 꼼꼼히 정했기 때문에 이틀 만에 와이어프레임 산출물을 완성할 수 있었다.

이번 주 요약

1. 와이어프레임 작업 완료
2. 프로토타이핑 제작 중

차주 계획

1. 프로토타이핑 완성
2. 스토리보드 설계
3. 최종 산출물 정리
4. 최종 프로젝트 회고

728x90