앱디자인, 개발을 고려한 디자인은 어떻게 하지?
와이너로 만나는 앱 서비스 디자인 과정 (1/2)
길었던 기획 단계가 끝나고 이제 디자인단계에 도래했다.
본 글은 기획 단계에서 마무리 된 와이어프레임에 디자인을 입히는 과정을 설명하는 글이기 때문에 보다 서비스 기획도 궁금하신 분들은 이전 글을 참고하고 오면 좋겠다.
우선 앱디자인을 시작하기 전에, 서비스 개발을 염두해두느냐 아니면 단순 연습 또는 포트롤리오 용도로서 GUI (Graphic User Interface) 디자인을 진행하느냐는 매우 큰 차이가 있다. 본 글은 서비스 개발을 염두해두고 작성하는 글이기에 GUI 디자인 뿐만 아니라 Design System에 관련된 이야기를 좀 나눌 것이다.
01. 컬러 선정하기
서비스의 컨셉과 향후 브랜드 이미지를 결정할 가장 큰 요소는 '컬러' 즉 색상이라고 봐도 과언이 아니다.
식상할수도 있겠지만 '와인' 하면 떠오르는 컬러는 아무래도 레드와인 색상을 띄고 있는 보라색, 자주색느낌이 먼저 떠오른다.
그래서 '와이너' 서비스도 필연?적으로 자주색 컬러를 선정하게 되었다. (특별함도 좋지만 그래도 친숙한게 먼저니까) 컬러값 선정이 어려운 분들을 위해서 https://color.adobe.com/ko/create/color-wheel
위 사이트를 참고하면 다양한 컬러를 조합해볼 수 있다.
다양한 와인색 컬러를 보여주고 있는 Adobe Color Pallette
위 프로그램을 사용하면 다양한 와인색 컬러를 보여주고 있다.
'와이너' App 서비스에 쓰일 컬러 파레트비교적 친근한 컬러감이 있고 와인의 이미지를 담을 수 있는 #BA0081 를 Primary Color로 선정했다.
이제 메인 컬러를 선정했으니 그라데이션으로 쓸 컬러와 포인트 컬러들을 설정한다.
그리고 가장 많이 쓰이는 GraySclaes를 설정한다.
이번 와이너에 쓰일 컬러들을 다시 나열해보면 다음과 같은 컬러들이 선정되었다.
와이너 디자인에 쓰일 컬러는 모두 선정되었다.
02. 그리드시스템
사실 디자인이라는게 겉으로 보기에는 화면을 예쁘게 그려야 하는 느낌이 더 강하지만 실제로는 개발을 위한 시스템 구축에 좀 더 가깝다. 먼저 알아야 할 것은 Grid System이다.
좀 더 쉽게풀자면 우리가 작업을 할 전체 크기(아트보드) 에 일정하게 간격을 나누어 영역을 확보한 것이다.
'와이너' App 서비스에 쓰일 Grid System03. 컴포넌트(Component)
좀 더 깊게알아보자면 컴포넌트 전 단계에 Typography와 Asset도 다루면 좋지만 내용상 생략한다.
그리그 시스템을 정했으면 그리드 위에 위에 컴포넌트의 크기를 정할 수 있게 되는데 이 Grid System덕분에 같은 컴포넌트를 반복적으로 사용함으로써 효율을 높일 수 있게 되었다.
와이너 Grid System 을 기준으로 만들어진 Components 종류들이제 반복적으로 쓰이는 버튼들은 이렇게 Grid System위에서 2개,3개 또는 6개의 Column을 차지하면서 버튼의 width값을 정하게 된다.
와이너 App 디자인에 을 구성하는 Components 리스트Grid System 위의 버튼 외에도 다양하게 쓰일 컴포넌트들을 구축해둔다.
04. GUI 디자인
이제 만들어둔 컴포넌트를 바탕으로 Layout에 컴포넌트들을 하나씩 그려나가면 된다.
이 때 와이어프레임(Wireframe) 에서 설계한 화면보다 더 UX를 고려해서 Layout이 달라질 수 있다.
달라진 화면은 화면정의서에 페이지가 업데이트 되었다고 명시하면 기획서에 큰 혼돈이 없을 것이다.
위 디자인의 예시처럼 이러한 방식으로 모든 페이지를 디자인하면 된다.
1차적으로는 초안을 완성 후에 사용성을 고려해서 부족하거나 어색한 부분들은 다시 배치를 조금수정하면 어느정도 UX디자인까지 고려하면서 설계할 수 있을 것이다.
초기 디자인 참고사항
보다 일관된 디자인 컴포넌트 관리를 위해서는 디자인시스템 작업을 완료한 후에 컴포넌트(버튼,카드 등 화면 구성요소들) 들을 바탕으로 화면을 채워나가면 되지만 처음 디자인을 할때는 이러한 규칙에 맞게 화면을 그리는게 어려울 수 있다. 그래서 적당히 화면 디자인을 해나가면서 중복되는 버튼들을 잘 정리해서 디자인시스템을 만드는것도 좋은 방법이다.
다음글에서는 보다 상세한 와이너 디자인가이드를 만나볼 예정이다.
