피그마 정리

사이드 프로젝트를 진행하며, 문제(?)가 있던 부분이 있었다.
 
관리자앱은 디자이너 없이 혼자 개발하여 피그마에 UI가 정의되지 않아 있던 문제가 있었고,
QA 과정에서 오류가 있어서 PM이 JIRA에 이슈를 등록하면 백엔드팀에서 화면만 보고 어떤 API를 어떻게 호출하고 있는지 알려 달라고 매번 코멘트 남기는 상황이 제일 문제로 다가왔다.
일주일에 한 번 회의하기도 하고, 백엔드 팀원 중 한 분은 주로 주말에만 작업하셔서 프론트팀한테 따로 묻지 않고도 화면만 보고 어떤 API를 호출하는지 알 수 있게 수정하면 좋겠다고 생각했다. 
 
사실 초반 설계했을 때 백엔드 팀에서 AA 화면에서는 xyz API를, BB 화면에서는 abc API을 호출하면 된다고 피그마에 기록해 주셨었다.
 
프로젝트를 지속하면서 모두를 이해할 수는 없다는 점, 각자의 목표는 다르다는 점, 들이고자 하는 시간 또한 각자가 다르다는 점을 또 되새기게 된다...🤓
 
-
결론은 전체적으로 정리가 필요해 보여서 한 번 정리하는 시간을 가졌다.
팀에 새로운 디자이너가 오시면 어느 정도는 정리해둔 상태로 보여드리고 싶어서 빠르게 작업했다.
 
 

BEFORE

 

AFTER

 

 

바뀐 부분

1) API 태그 컴포넌트 추가

 

작은 원은 스웨거의 HTTP Method의 색상을 나타내며, 각 태그의 배경색상과 글자색상은 임의로 도메인마다 구분지어 두었다.

원의 색상과 태그의 색상을 반대로 해둘까 계속 고민했기에 직관적으로 와닿는 태그는 아니라는 점에서 아쉽지만, 추가 자체에 의미를 두기로 했다.

 

2) 응집도와 위계를 고려했다.
조금 산발(?)되어있던 엣지케이스들이 알맞은 탭의 섹션에 있도록 위치를 수정했다.
그리고 탭 전환 시 가장 먼저 보이는 화면들을 최상단에 두고, 뎁스가 추가된 화면들은 그 아래에 나열했다.
 
3) 기존 화살표가 조금은 복잡하다고 생각이 들어, 프로토타입으로 메인 플로우 화면들만 연결했다.
직무에 따라 화살표를 보는 것이 중요하지 않은 팀도 있을 테니까.

프로토타입 추가

 
4) 위젯 추가 !
- 기존에 정리되어 있던 요구사항을 새로운 위젯을 활용하도록 수정하고, 안드로이드 팀원이 추가로 왔을 때 전달할 만한 요구사항&히스토리를 추가로 정리해뒀다.
- 요구사항 확인하다가 현재 개발된 것과 다른게 보여서 Notice로 정리해뒀다.
- 이전에 놓쳤던 엣지케이스에 대해 디자인 요청을 하기 위해 To Do도 정리했다.
- iOS 남은 작업들도 정리해뒀다.
 
iOS ToDo 작업은 JIRA에 등록되지 않은 이슈로,
PM이 확인해서 우선순위를 파악해서 등록할 수 있도록 어느 정도의 여지를 남긴 것이다..ㅎㅎ,ㅎ 

 

 

 

아무튼 정리 끝 - !