서비스를 직접 런칭하기 전까지는 개발자와 협업해본 적이 없었기 때문에, 개발에 대한 지식은 아무 것도 모르고 있었다.
심지어 피그마에서 디자인을 완료하고 제플린으로 넘겨주면 끝 아닌가? 라고 무식한 생각을 하고 있을 정도였으니까.
나와 같은 예비 UXUI 디자이너들을 위해 디자인 전 처리해야 할 기본적인 밑 작업들에 대해 얘기해보려고 한다.
나 또한 앱 런칭을 처음 겪어본 학생 예비 디자이너이기 때문에, 기초적인 부분들에 대한 참고로만 생각해주길 바란다.
[클라이언트 개발자와의 협업, 제플린으로 넘겨주기]
클라이언트 개발자는 인터페이스, 즉 화면 UI 자체를 구현하시는 개발자분 들이기 때문에
디자이너와 제일 긴밀하게 협업할 수 밖에 없는 개발 직군이다.
일단 클라이언트 개발자에게 제플린으로 디자인 파일을 넘겨주기 전에 작업해야 할 것들에 대해 설명해보겠다.
1. frame 깔기
디자인의 각 요소에 투명한 배경의 사각형 배경을 뒤에 깐 뒤,
'frame'이라는 명칭으로 레이어명을 바꾸고,
frame 내에 있는 디자인 요소와 frame을 그룹화 시킨다.
프레임을 잡고 그룹화 > 더 큰 그룹이 있다면 또 프레임을 잡고 그룹화
이렇게 작업하다보면 그룹의 그룹의 그룹이 만들어질 것이다!
❗️개발은 디자인 요소를 모두 좌표값을 통해 배치시키기 때문에 frame을 제대로 잡아주지 않는다면,
위치를 제대로 잡을 수가 없다. 그렇기 때문에 모든 UI 요소들은 frame으로 묶어 그룹화를 시켜야 한다.
2. 에셋 이름 정리
아이콘, 이미지, 배너 등 png 혹은 svg 파일로 넘겨주어야 할 요소들의 레이어 명을 정리한다.
→ 이 파일들을 png 혹은 svg 파일로 내보기한 뒤, 폴더를 보기 좋게 정리한다.
아이콘, 배너 등과 같은 이미지들은 모두 개발자에게 파일로 전달해주어야 하기 때문에 네이밍을 통일성있게 정리하는 것도 굉장히 중요하다. 아마 개발자 마다 붙이는 에셋 네이밍이 다르겠지만, 공통된 규칙은 존재한다.
icon=ic/ image=img/ button=btn 등등
보통 내가 작업할 때 사용하는 네이밍 순서:
에셋종류_(아이콘이 사용되는 페이지)_에셋이름_(에셋상태)_(사이즈)
()로 표시해 둔 부분은 생략 가능!
Ex) ic_home_solid_24.png
❓ 네이밍에 참고할 만한 글들도 첨부해놓겠다.
https://brunch.co.kr/@pizzakim/26
3. 프로토타이핑 완벽하게 구현해놓기
프로토타이핑도 디자인에 한 부분이기 때문에 중요하다.
개발자 분들이 피그마 혹은 XD내에서 프로토타이핑을 실행해보고 참고할 수 있게
완벽하게 구현되게 작업을 해보고, 상세한 부분까지 신경을 써봐야 한다.
예를 들어 아이콘의 패딩값을 얼마나 줄 것인지, 만약 인터넷환경이 느려
로딩 중일 때는 팝업 혹은 로딩 이미지를 어떻게 띄울 것인지 등등 말이다.
4. 디자인 시스템 정리
UI에 사용한 컬러와 타이포그래피를 모두 정리해서 문서화시키면 개발자들이
초기에 디자인시스템을 구축하는데 도움이 될 것이다.
메인 컬러와 서브 컬러 등의 HEX코드, rgb 값/ 타이포그래피의 크기, 자간, 행간, 굵기 등의
디자인 시스템을 문서화하는 것도 좋은 방법이다.
Ex) 내가 노션과 피그마에 정리했던 디자인시스템이다.
[서버 개발자와의 소통]
사실 디자이너라면 서버 개발자보다는 클라이언트 개발자와 소통할 일이 더 많지 않을까 싶다.
하지만, 나는 디자인과 기획 모두 혼자 진행했기 때문에 IA, UX Flow 제작 또한 내가 직접 설계를 해야 했다.
그래서 서버 개발자분과도 여러가지 피드백을 주고 받았는데, 개발 전 더 상세하게 생각해보면 좋을 것을 얘기해보겠다.
1. 어떤 조건시, 어떤 데이터를 불러올 것인가
어떤 조건에서 어떤 데이터를 불러올 것인가이다. 예를 들어, 사용자에게 피드를 추천해준다고 해보자.
그러면 그 피드는 어떻게 선출되어야 할지 기준을 정해야 한다.
24시간 이내 좋아요를 많이 받은 피드 순으로 나열할 수도 있고,
사용자가 초기에 입력한 키워드와 00개 이상 일치하는 피드를 선출할 수 있다.
또한, 알림 기능을 만든다면 알림은 어떤 기준으로 송출할 것인지,
그리고 알림이 온지 일주일 이상이 되었을 때 삭제를 할 것인지에 대한 기능을 설계하는 것이다.
나는 개발 전에 상세한 IA를 짰음에도 불구하고 개발할 때는 해결해야 하는 이슈들이 계속 있었다.
그렇기 때문에 기능에 따라 데이터 송출 기준을 상세하게 작업해서, 개발할 때 무리없게 준비하면 더 좋을 것이다.
나도 앱을 실제로 런칭한게 이번이 처음이라 글을 적으면서 부족한 정보 혹은 미흡한 정보가 있을 수도 있다.
하지만, 과거의 내가 이 글을 보고 작업을 했으면 더 수월하게 개발자와 협업을 했을텐데,,라는 마음으로 블로깅을 해본다.
글에 나와있는 부분은 개발 전 아주 기본적으로 처리해야될 작업들이다.
시니어나 현업 디자이너분들 보단 앱을 처음 런칭해보는 예비 디자이너들이 참고하면 좋을 것 같다 :)
조금이나마 도움이 되었으면 좋겠고, 디자이너 개발자 모두 원활한 협업을 위해 응원한다!
'UXUI 팁' 카테고리의 다른 글
| IT 동아리 메이커스 공모전 후기 (0) | 2022.01.03 |
|---|---|
| UXUI 디자이너들을 위한 사이트 추천 (1) (0) | 2021.12.22 |
