스타트업 기획(2)

저번에 이어서 두번째 기획단계이다.

 

저번에 Figma를 이용하여 와이어프레임을 만들었고, 좀더 섬세하고 자세하게 만들었다.

 

Figma를 이용한 와이어프레임

 

저번과 다른점은 왼쪽편에 각 프레임마다 페이지의 이름을 써놓았다.

 

다른 사람이 보았을때, 해당 페이지가 어떤걸 의미하는지, 어떤걸 목표로 하는지 알기 쉽게 하기 위해서이다.

기획을 한뒤에 직접 디자인을 할수도있지만, 디자인을 위해 디자이너에게 건내기 위해 좀더 보기 쉽게 표시한것이다.

 

어플을 만들어본 경험이 있는 내가 보아도 나중에 개발자가 와이어프레임만 보았을때도 어떤식으로 구성이 되는지 확실히 알기 쉬웠다.

 

또한 잘 보이지는 않지만 좀더 자세한 구성을 하였다.

예를 들어 저번에는 없던 네비게이션바, 모든 버튼 및 어떤 단어나 문장이 들어가야 하는지 구성을 해놓았다.

 

구성을 하다보니 수치가 들어가야 할 레이아웃이 있었는데, 해당 레이아웃에 정확하게 입력을 해줘야했다.

 

 

 

저번 작성을 왼쪽 처럼 했다면 이번에는 오른쪽 처럼 나중에 개발을 다른 사람이 하게 되었을때 어떤 값이 들어가는지 정확하게 입력을 해줘야한다. 소수점이 필요하다면 몇번째 소수점까지 원하는지 정확하게 표시를 해야한다.

또한 오른쪽처럼 구성하게 되면 안된다.

디자인과 개발을 혼자한다면 자신이 기획을 했기 때문에 저런식으로 작성해도 상관이 없지만, 다른 사람이 보게 될경우

정확한 의도를 파악하기 힘들다.

그렇기 때문에 MIN과 MAX는 옆에 주석처럼 프레임밖으로 빼놔야 한다.

 

 

기획단계에서 중요한것은 행동유도이다.

어플리케이션을 사용할 사용자에게서 행동을 유도하는것이다.

가장 좋은 예로 사용자가 사용하게 만들 버튼에는 색상을 넣어주고, 그렇지 않은 버튼에는 색상을 빼는 방법이다.

카카오 로그인 이미지

 

정확하게 맞는지는 모르겠지만, 카카오 로그인에서 로그인버튼만 노란색으로 강조되어있다.

밑에 회원가입/카카오계정찾기/비밀번호 재설정등 다양한 버튼이 존재하지만 로그인을 강조한것 처럼 색상을 넣어주는 방법으로 강조할수있다.

 

또한 색상이 외에도 글자를 이용하는 방법, 클릭시 효과를 주는방법등 다양한 방법을 이용하여 행위유도를 해야한다.

 

 

그리고 프로토타이핑을 만들다가 알게 되었는데, 모달창과 팝업창이 서로 다르다는 것이었다.

팝업창은 기존창에 새로운창을 띄우는 형식이고, 모달창은 기존창에 새로운 레이어를 올리는 것이다.

특정한 내용이나 공지 및 주의사항등 전달과 강조를 하기 위해 사용한다는 공통점이 존재하지만 팝업은 창에다 새로운 창을 띄운다면, 모달창은 기존창과의 부모자식관계이다.

 

모달은 막 사용하면 안되고, 모달이 나타날 뒤의 기존창이 돌아가지 않은경우에 사용하면 좋다고 한다.