[4주 프로젝트] 4. 프로토타입 작성

 

 

이번에는 와이어프레임을 바탕으로 프로토타입을 작성하였다.

우리 팀은 시중에 나와있는 여러 툴 중, miro를 사용하였다. 

좋은 프로토타입 작성 무료 툴들이 많지만, 그 중 miro는 2주 프로젝트를 할때 사용하여 손에 익었기도 하고, 매우 조작하기 편해서 이번에도 그대로 사용하였다.

 

프로토타입은 와이어프레임과 다르게 디자인적 요소도 들어가고 실제 웹사이트와 흡사하게 만들어야하므로 더 디테일한 부분들을 팀원들과 정하였다.

 

 

1/ 로고

와이어프레임을 짜면서 서비스 이름도 같이 정하였는데, 팀원들이 낸 여러 후보들 중 '아팡'이 제일 눈에띄고 입에 잘 붙어 '아팡'으로 정하였다.

(정말 아이디어는 자유로운 분위기에서 툭툭 던지는 것들 중 괜찮은 것이 많이 나온다..)

 

우리 서비스 이름인 '아팡'로고를 한글로 하는것이 더 보기 괜찮은지, 영어로 Apang으로 하는게 좋을지

한글 '아팡'으로 로고들을 여러개 만들고, 영어 'Apang' 로고도 여러개 만들어 최종적으로 팀원들이 가장 괜찮다고 생각하는 걸로 정하였다.

 

 

2/ 우리 웹사이트의 전체 대표색

인터넷으로 조사해보니 색깔별로 의미하는 바가 다 다르다고 한다.

예를 들면, 쉽게 유추할 수 있겠지만 빨간색을 활기와 야망, 열정, 권력, 부, 복을 의미하고

노란색은 희망, 활기를 의미한다고 한다.

그 중, 파란색은 바로 신뢰!

그래서 병원 사이트를 들어가보면 파란색 계열의 디자인이 굉장히 많다.

 

우리는 메뉴버튼 등 대표색은 하늘색으로 하고,

로고색깔은 조금 진한 파란색으로 정했다.

글씨는 검정색으로, 버튼 등은 하늘색 계열(#63B5F6)로 만들었다.

 

 

만약 어떤 파란색 계열도 어떤 컬러들로 조합을 해야할지 잘 모르겠으면 컬러 툴을 이용하는 것도 좋을 듯 하다.

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=29B6F6&secondary.color=4FC3F7&secondary.text.color=000000

Color Tool - Material Design

 

3/ 전체 대표 색에 맞는 그림, 그리고 문구 넣기

대표 컬러를 정한 후, 그 컬러에 맞는, 그리고 목적에 맞는 그림을 찾아서 넣었다.

우리는 파란색 계열 중 찾았고, 병원관련 서비스이다 보니 병원그림, 의사 그림을 위주로 찾았다.

 

그리고 각 페이지마다 필요한 문구들을 목적에 맞게 작성하였다.

 

 

4/ 페이지 전체적인 디자인 및 레이아웃

사실 가장 중요하면서도 가장 어려운게 페이지 전체적인 디자인 및 구성인 것 같다.

정말 도저히 감이 오지 않는다면 유명한 사이트를 참고하거나

dribble이라는 사이트를 보고 인사이트를 얻는것도 좋다고 생각한다.

참고할만한 디자인들이 많다.

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals

 

이렇게 팀원들과 프로토타입도 작성해보았다.

(실제 프로토타입은 우리팀 프론트엔드 팀원들이 직접 하나하나 작성하였다. 이 자리를 빌려 다시 한번 팀원들에게 무한한 감사를!)