슬대표 - 와이어프레임, 기능리스트

 

1. 와이어 프레임

 

와이어 프레임이란

와이어프레임이란, 앱의 한 화면에서 구성되는 요소들을 모두 그린 화면 단위의 레이아웃이다. 내가 만들고자 하는 앱의 화면을 하나하나 그려보는 작업이다.
 

이렇게 화면을 그리다보면 해당 기능에 대한 설명이 필요하다. 그러한 설명을 같은 페이지에 설명 정리한다.
 

와이어프레임을 파워포인트에서 만들 수 있지만, [스케치, figma, 어도비 xd] 툴로 그려야 편하다. 게다가 앱이 구현되는 시뮬레이션 기능까지 가능하다.
 

와이어프레임은 기획에서 가장 중요하다. 실제로 앱이 나올때 모습이니 가장 중요할 수밖에 없다.
 
문제는, 이 작업이 엄청 힘들고 고통스로운 작업이다. 앱을 뜯어보면 끝도 없이 나오는 요소들이 많다. 
 

예를 들면, 이건 앱이 아니라 웹의 예시이기는 한데, 이렇게 회원가입에도 유횻값에 대한 경우의 수(= 변수들)가 많다. 유저 입장에서 별생각 없이 썼지만, 개발자 입장에서는 단순해 보이는 앱도 뜯어보면 굉장히 많은 화면 요소들이 나온다.
 
 



 

* 와이어프레임의 목적과 전제조건은 ?

1. 대표자(=클라이언트)는 만들고자 하는 화면 내 각각의 작동 기능을 정립하기 위해 와이어프레임을 만들어야 한다. 그래야만, 개발자는 필요한 기술을 정리하고 일관성 있게 설계할 수 있다.
 
2. 와이어프레임은 UI 디자인이 아니기 때문에 디자인하지 말고 정말 기능 표시만 하면 된다.  개발자는 해당 서비스의 유사 사이트를 보고 디자인을 파악하는 것이 좋다.
 
3. 처음에는 프로토타입만 개발한다는 생각으로 기능욕심을 버리고 최소한의 기능으로 구성해 본다.
 
4. 와이어프레임에서 '페이지수가 곧 개발비용이다'. 페이지수가 나오면 이를 통해 인건비가 계산이 되고 개발비가 결정이 된다.
 

* UI 와 UX 디자인

우리가 보이는 앱의 화면을 어떻게 예쁘게 디자인하느냐가 UI  (화면 디자인) 디자인이다. UX는 사용자 경험에 의한 편의성이다. UI는 모방하기 쉽지만, UX는 힘들다.
 

어떤 앱이 출시가 되면, 유저들의 경험과 피드백이 쌓이고, 이를 바탕으로 편의성을 위한 수정 보완 값들도 생기게 된다. 이 해결책으로 특별한 기능이 있다면, 'UX 특허'를 낼 수 있다.
 
처음에는 사용자의 피드백이 없기 때문에 대표자가 UI를 그리면서 상상의 UX를 뽑아내야 한다. 이때 중요한 것은, 절대 '차별성, 독창성'을 추구하면 안 된다. 왜냐하면 유저들이 통상적으로 기능에 따라 반응하는 습관들이 있는데, 이것을 위배한다면 사용법에 대한 스트레스가 쌓이고 외면받는 앱이 될 수 있다.
 

와이어프레임으로 화면구성을 짜고 나면, 이 구성에 맞게 UI 디자인(화면 디자인)을 입힌다. 그러고 나서 디자인을 가지고 개발자들이 개발을 한다. 개발을 하고 디자인을 입히는 것이 아니라, 디자인을 하고 거기에 개발을 붙이는 것이다. 
 
디자인에도 여러 가지 툴이 있는데, 정통 툴은 '포토샵'이다. 포토샵으로 디자인한 것은 퍼블리셔에 의해 또는 퍼빌리싱을 할 줄 아는 디자이너에 의해  퍼블리싱과정을 거치게 되고, 이 값을 가지고 개발자가 개발을 하게 된다. 요즘에는 디자인 툴에 퍼블리싱 기능이 포함되어 편리하게 작업을 할 수 있다.  
 
 
 

당연히 디자이너를 통해 디자인하면 좋겠지만, 우선은 최소 비용으로 개발해서 시장검증 해보는 것이 더 중요하다. 이럴 경우, 디자인을 굳이 하지 않아도 어느 정도 평균의 결괏값은 만들어내는 디자인이 있다. 바로, 애플과 구글에서 제공하는 디자인 양식을 활용하는 것이다. 이러한 디자인 툴을 사용하면, 나름 깔끔한 디자인을 뽑아낼 수 있다. 
 

디자인 구성에 대해서 한 가지만 더 언급하자면 '화면크기'이다. 우리가 가지고 있는 핸드폰 화면 비율이 상당히 제각각이다. 그래서 UI 디자인도, 화면 비율마다 디자인 비율도 조정해야 한다. 
 
 
 
 
 




 
 

2. 기능 리스트

 

기능리스트란?

기능 리스트( = 요구사항 명세서)는 해당 앱의 기능들을 표로 단순화하여 정리한 것이다. 이 기능리스트를 만들어야, 기능들을 점검할 때, 개발 검수 할 때 빠짐없이 체크가 가능하다. 해당 리스트는 계약서를 쓸 때도 개벌 과업 범위에 대한 명확한 가이드 라인해줄 수 있으며, 향후 분쟁이 발생할 경우 개발 여부 기준이 된다. 
 
 
 
 
 
 
 
 

3. 개발 범위에 따른 가격

앱 개발을 처음부터 정식 서비스를 목표로 하면 리스크가 크다. 서비스 전체를 100%이라고 가정하였을 때, 처음부터 100%을 다 개발하면 개발비도 많이 비싸지고, 또 실패가능성이 크기 때문에 비싼 개발비를 날릴 가능성이 커진다. 그래서 처음에는 프로토타입에서 출발해 차츰 성장해 나가는 것이 최종 개발비도 아끼고 실패 확률도 줄일 수 있는 방법이다.
 

개발 비용

대략적인 개발비를 이야기하면, 프로토타입 개발비용은 약 2천만 원 이하, 서비스를 본격적으로 개발하는 비용은 3천 이상, 고도화 개발은 5천 이상을 생각하면 된다. 
 
 
 
 

기획 후 앞으로 남은 과정

 

 

 

* 번외 : 퍼블리싱이 무엇이고, 퍼블리셔와 퍼블리싱이 가능한 디자이너와 어떤 차이인가?

- 웹 디자인와 개발자 중간에 있는 작업 : 퍼블리싱
- 웹 디자이너와 개발자의 중간에 있는 역할 : 퍼블리셔

디자인과 퍼블리싱 둘 다 하는 퍼블리셔가 많아서 디블리셔라는 신조어도 있다. 그만큼 웹 디자이너와 웹 퍼블리시은 떼려야 뗄 수없다.

* 웹 디자이너 - 디자인 툴(일러스트레이션, XD, 피그마)을 이용해서 이미지파일(JPG,PNG)을 만든다.

* 웹 퍼블리셔 - 코드편집기(Visual Studio Code : VS 코드, 이클립스Eclipse, 드림위버 Dreamweaver)를 이용해서 웹페이지(크롬, 익스플로러, 웨일, 엣지, 파이어폭스 - html, CSS 웹언어로)를 만든다. 웹페이지들도 결국 폴더 안에 들어가 있는 파일인데, 확장자가 html, php 등 파일들을 웹브라우저가 열면 웹페이지가 된다. 화면기획서와 디자인을 보고 웹페이지의 글자 크기, 글자색, 글자 폰트부터, 버튼 크기, 버튼 모양, 버튼 새깔 등 웹페이지 위에 표현되는 모든 것을 코드로 지정한다. 

* 퍼블리싱 : 웹 화면을 그려내는 작업, 웹 디자인을 코딩으로 하는 것이다. html, css 언어로 웹 화면을 구현하는 것으로 자바스크립트와 제이쿼리까지 쓸 수 있다면, 더 역동적인 화면을 만들어 낼 수 있는 프론트엔드 개발 영역까지 일부 수행할 수 있다. 

그래서 퍼블리셔이지만, 때로는 디자이너가 되고, 때로는 프론트엔드 개발자가 되기도 한다.

 

 

 

 

 

 
* 참고 : https://youtu.be/f2YqMLaBnfA