[UI아티클] 기획/디자인 - 개발자와 효과적인 소통 방법

개발자 친구와 어플리케이션을 제작해보기로 한 이후에 러프한 UI를 먼저 만들었고,

플로우차트/프레임워크는 따로 두지 않았었다. 내가 생각했던 아이디어라 비주얼적으로 보여지면 충분하겠지라고 생각했는데,

개발자 입장에서 구현하기 위해서 구체적인 페이지의 의도/플로우가 써져있지 않는한 같은 생각으로 구현하기가 어렵다는 것을 깨달음...!!!

(피그마 프로토타이핑으로도 한계가 있더라...! - 예를 들어 intro01 페이지에서 선택안함 옵션을 눌렀을때,

이후 홈으로 이동하면 특정 옵션이 안보인다던지에 대한 선택사항)

 

그래서 찾아봤던 아티클이 [ 효율적인 기획 방법 찾기 ] 글이었다.

디자인을 기획하고 개발자가 구현하는 커뮤니케이션 방식은 각 회사마다 다른 방법을 선택하고 있고,

결국 " 얼마나 많은 사람이 기획서를 보았을때 이해할 수 있는가 " 가 잘된 커뮤니케이션 이라고 생각이 들었다.

 

스토리보드 형식

 

개발자 친구가 구간별로 나눠주면 코드를 넣기 쉽다고해서 구간별로 상자 크기를 다르게 해서 타이핑을 하는데,

네모를 넣고 텍스트를 얹고, 몇번 수정하다보니 정렬맞추는 것도 까다롭고 이렇게 쓸거면 auto layout으로

긴 문자에도 적절한 텍스트 간격을 유지하는게 낫겠다 싶어서 변경을 하기로 했다.

 

 

피그마의 플러그인 - anotate it 사용

 

그 다음으로 추천 받은 피그마 플러그인 Annotate it! 이라는 것인데, 과연 사용이 편리하다.

보드에 우선 번호를 부여할 수 있어서 팝업창 같은 것도 한편에 설명을 면밀히 작성할 수 있고,

각 페이지 별로 설명을 나눠둘 수 있으며, 1번 2번 드래그로 순서까지 쉽게 바꿀 수 있어서 일일히 타이핑을 고칠 필요가 없다.

 

근데 가장 큰 문제점은? 7일 무료 트라이얼 이후에 유료라는 점...!!!

같이 작업하는 사람의 숫자가 많다면 써볼만 하겠지만 개발자 친구와 1대1로 어플리케이션을 제작하고 있기 때문에 우선 패쓰했다.

나중에 돈 더 벌고 사용하도록해야지... 돈 없을때에는 이 몸 한덩이가 자산이라잖아? ^_ㅠ

 

 

이렇게 플러그인의 방식 컴포넌트/오토레이아웃이 어떻게 적용되고 있는지 흉내를 내어서 작성을 해두었다.

스토리보드 형식 + 플러그인에서 괜찮아보였던 점을 적용시킨 버전인데,

사실 아직 개발자 친구가 본 상태가 아니라서 효과적이라고 하기는 좀... 뭣하지만 일단 깔끔해보여서 개인적으로는 좋다.

 

 

---

앞으로 기획서 방식은 계속해서 수정해나가겠지만 어플리케이션의 완성도가 올라갈수록,

화면이 점점 많아지고 서로 인터랙션 되는 부분과 애니메이션이 적용되는 부분이 늘어나기 때문에 간과할 수 없는 요소가 분명하다.

그리고 역시 플러그인은 플러그인인가, 되게 편한데 아쉽게도 유료...

언젠가 피그마 플러그인도 하나쯤 만들어보고 싶다. 나도 돈 좀 벌어보자 XD