디자이너가 아닌 경우 그림판은 만져봤다는 경우도 적지 않다.
나 또한 포토샵이나 일러스트는 다룰줄 모르기 때문에
고도의 디자인 작업은 무리인만큼
간단하고 심플한 디자인 컨셉으로 진행하였다.
다크모드를 지원하기 위해 한 화면을 두가지 색상으로 그렸다.
다크모드와 라이트 모드에 맞춰 같은 요소(제목이나 화면 테두리 등)라도
바탕색에 맞춰 조금씩 색에 변경을 주어야
전체적으로 촌스럽거나 붕뜬 위화감을 피할 수 있다.
화면정의
간단한 규모의 앱이여서 5개의 화면이 나왔다.
1. 인트로 화면 : 앱을 실행시 나오는 화면으로 주로 해당 앱의 로고가 나타난다.
2. 홈화면 : 주로 메인으로 여기는 기능이나 메뉴를 표기하는 화면인데
나의 경우 작성한 글 리스트를 표기해줬다.
3. 작성화면 : 글을 작성하는 화면
4. 상세 화면 : 작성한 글을 확인할 수 있는 화면
5. 설정화면 : 앱 사용에대한 편의 기능이나 여러가지 설정을 제공하는 화면
화면을 기획하거나 디자인할때 주로 고려해야할 사항이
화면간의 전환 기능이다.
간혹 많은 기능을 담은 앱을 기획하다보면
화면은 있지만 화면으로 넘어가는 방법을 제시하지 않는 경우도 있다.
따라서 하나의 화면을 추가할때 어떻게 동작해서 이동할 것인지를 고려해야한다.
심플한 디자인을 위해 염두해야 할 사항
1. 색상을 단조롭게 쓴다.
너무 많은 색상은 눈을 피곤하게 하고 심플과 멀어진다.
2. 포인트 컬러를 살린다.
다양한 색의 조화를 살리기 어려우면 무채색을 적절히 사용하고
포인트 컬러로 강조하고 싶은 부분을 살린다.
3. 간격을 신경쓴다.
좌우간격이나 상하 간격을 동일하게 맞춰주면
같은 구조라는 느낌을 살릴 수 있다.
위의 디자인 작업의 붉은 선이 화면 내 컴포넌트의 간격을 맞추기 위한 가이드 라인이다.
상단의 메뉴바와 아래의 리스트를 구분하기 위해
상단과 리스트를 가르는 선을 넣었고
리스트에 동일한 구조가 반복되므로
깔끔하게 보이게 끔 좌우 간격과 리스트 아이템 간격을 신경썼다.
이정도만 신경써줘도 못생긴 디자인에서 벗어날 수 있다.
부디 배경에 이미지를 깔거나 화려한 색으로 채우는
대학교 발표 PPT 나쁜 예에서 벗어나자!
(나쁜 예가 궁금한 사람은 보노보노 무지개 ppt를 검색!)
디자인 과정은 피그마 사용방법에 대해 따로 글을 적을 예정이며
내가 사용한 무료 서비스를 소개한다.
소규모의 프로젝트나 비용을 절감하고 싶은 소규모의 회사에서 사용하기 좋은 툴이다.
사이드 프로젝트를 진행하는 많은 팀에게 추천해주고 싶을 만큼
사용이 간단하고 무료로도 충분히 작업이 가능한 서비스들이다.
소규모 프로젝트 진행시 추천하는 무료로 이용 가능한 서비스
기획 : MockFlow
디자인 : Figma
디자인 공유 : Zeplin
개인 개발을 하는 만큼 투자 비용을 줄이기위해
서비스를 무료로 제공하는 피그마를 이용했다.
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
포토샵이 없거나 디자인 툴을 다룰줄 모르는 사람에게도 간단하게 디자인을 할 수 있게 지원하는 사이트이다.
사이트에서 desktop용 프로그램도 지원한다.
피그마를 이용해 작업한 디자인 파일은 제플린이라는 서비스를 통해
다른 팀원이나 개발자와 공유할 수 있어 소규모 프로젝트 진행시 비용을 절감할 수 있는 좋은 서비스이다.
현업에서도 디자인 공유를 제플린으로 하는 경우가 많으므로 피그마를 이용한 작업을 추천한다.
Zeplin
Deliver on the promise of design
zeplin.io
'개발 이야기' 카테고리의 다른 글
| 모바일 앱 출시하기 - (1) 기획 (0) | 2022.02.16 |
|---|
댓글