10/10 [9주차] UI

KEEP

일관성 있는 UI 만들어 나가기

‘댕동'이라는 서비스명과 우리의 핵심 기능에 맞는 최종 UI 디자인 컨셉을 결정했다. 디자인 컨셉을 기준으로 팀원들과 각자 페이지를 맡아 시안 작업을 진행했다.

나는 이번 작업에서 서비스 컨셉을 잘 담아낸 UI 구현에 집중했다. 다른 플랫폼에서는 유사한 기능을 어떻게 표현하고 있는지 UI와 UX 관점에서 레퍼런스를 많이 찾아보고, 다양한 앱을 직접 깔아 사용해 보면서 다양한 화면 디자인을 시도했다.

내가 맡은 화면 중 하나인 요청 글 작성 페이지가 우리 서비스의 핵심 기능이다보니, Input 요소에 서비스 컨셉을 담기 위해 노력했다. Text field 입력 방식부터 tag와 Button 컬러 하나하나 다양한 시도를 하면서 최종 시안을 만든 결과, 팀원들에게 우리 서비스 컨셉에 가장 잘 맞는 UI를 구현했다는 이야기를 들을 수 있었다.

멘토님께서도 우리 팀의 UI는 전체적으로 균형미가 잘 잡힌 것 같아서 플로우와 사용성을 고민하며 본격적으로 작업해도 좋을 것 같다고 긍적적인 피드백을 주셨다.

Problem

계층 구조를 고려한 UI

그레이 컬러를 사용하는 게 어려웠다. 기능에 따라 그레이 컬러 값에 조금씩 차이를 주려다보니 한 화면에 너무 많은 컬러가 사용된 느낌을 받았다. 정보 계층의 중요도를 항상 고민하고 컬러 사용에 목적이 명확해야 한다는 멘토님의 피드백을 듣고, 화면별 계층 구조를 생각하면서 컬러 시스템을 잡아갔다. 아직은 컬러 하나에도 많은 고민과 스터디가 필요한 단계이지만, 이런 작은 디테일이 완성도에 큰 영향을 미친다는 게 UI의 매력인 것 같다!

Try

컴포넌트를 활용한 디자인

최종 시안이 결정되어 디자인 시스템과 컴포넌트를 만드는 작업을 진행하고 있다. 필요한 컴포넌트를 만들고, 컴포넌트를 기존 작업물에 적용하는 과정에서 생각보다 시간이 많이 소요되었다. 실무에서 컴포넌트 활용이 왜 중요하다고 했는지 직접 만들면서 알 수 있었다. 이제는 컴포넌트를 바로바로 적용해 가면서 화면을 빠르고 일관성있게 만들어 가야겠다.