앱/웹 개발 과정과 비용

 

앱이 무엇이죠?

앱이란, 애플리케이션(application)의 줄임말로 써 우리가 사용하는 스마트폰, 태블릿과 같은 기기에 다운로드해 사용할 수 있는 응용 프로그램을 말합니다. 현재 우리는 스마트폰을 사용하면서 카카오톡, 페이스북, 인스타그램과 같은 수많은 앱을 사용하는데, 이런 앱들을 개발하기 위해 어떠한 과정이 필요하고 비용은 어떻게 산출되는지 알아볼까요?

· 앱/웹 개발 과정

앱이나 웹 제작은 일반적으로 다음과 같은 단계를 거치게 됩니다.

Step.1 서비스 기획

생각된 아이디어를 구체화하고, 구체화된 서비스를 이용할 고객을 분석하고 기존의 서비스되는 관련된 사례를 조사하여 트렌드를 분석하여 개발계획을 수립합니다.

1. 아이디어를 구체화
예를 들어, <“길을 안내해 주는 앱”에 AR을 이용하여 사용자가 길을 쉽고 재미있게 찾는다.> 와 같이 생각한 아이디어를 구체화시켜 문서화합니다.

2. 사용자 분석
다양한 방법론을 통하여 사용자가 기존에 있는 유사한 앱을 사용하면서 무엇이 불편하였는지 어떠한 기능이 있었으면 좋겠는지 조사하고 분석하여 고객의 니즈(Needs)를 찾습니다.

3. 환경(트렌드) 분석
앱을 사용할 사용자에 환경과 그에 맞는 트렌드를 조사하여 분석합니다.

4. 개발계획 수립
이 앱을 어떠한 디바이스 또는 플랫폼에
어떠한 종류의 앱으로 사용자에게 사용 경험을 줄지 정한 뒤, 앱 제작 계획을 수립합니다.

Step.2 디자인

서비스 기획 내용을 바탕으로, 세부 기능을 정리하여 이 서비스를 어떻게 경험할 수 있게 할 것인가에 대한 UX / UI를 설계하고 프로토타입을 활용해 검토한 뒤, 사용자에게 보여주게 될 GUI를 디자인합니다.

1. UX / UI 설계
기획 단계에서 도출된 자료를 통해 주요 기능과 세부 기능을 리스트 업해서 정리하고 이에 따른 UX / UI를 설계하여 와이어 프레임으로 레이아웃을 구상하여 스토리보드를 통해 사용자가 실제로 보게 될 화면을 설계합니다.  (스토리보드는 UI 설계서, 화면정의서, 시나리오라고도 합니다.)

Q. UX와 UI는 무엇이 다르죠?
UX란, 사용자 경험이라는 총체적인 관점으로 콘셉트를 잡고 개발 방향을 정하는 작업을 말하고, 그것을 구현하는 제작 단계에서 사용자에게 맞는 최적화를 시켜주는 디자인 행위를 UI 디자인이라고 합니다. 
(오래가는 UX 디자인 반준철 저, 한빛미디어 출판사)

2. 프로토타입(prototype) 제작
와이어 프레임과 스토리보드와 같은 정적인 화면에 인터랙션을 넣어 개발보다 단시간에 실제 구현할 수 있는 프로토타입을 제작하여 사용자 경험에 대한 테스트를 하여 설계 부분 리스크를 사전에 예방합니다.

3.GUI 디자인스토리보드를 보며 콘셉트에 맞춰 사용자가 직접 눈으로 보게 될 그래픽 (색상, 아이콘, 화면)을 디자인합니다.
이때에는 사용자가 어떠한 기능을 사용할 때 메뉴나 버튼, 기타 입력창들을 사용자가 사용하기 쉽도록 직관적으로 쉽게 알아볼 수 있게 디자인하는 것이 중요합니다. (각종 플랫폼 가이드라인을 참고하면 용이합니다.)
[구글의 Material Design Guidelines 바로가기]
[애플의 Human Interface Guidelines 바로가기]

이후 제플린과 같은 프로그램을 활용하여 개발자와의 소통을 원활하게 해 주는 것도 중요합니다.

Step.3 개발

디자인이 완성된 화면을 분석하여 실제 구현하고 출시할 수 있도록 개발하고 테스트합니다.

 

1.UX, UI, 디자인 분석
수립된 디바이스, 플랫폼에 따라 UX/UI 설계 단계에서 나타난 기능과 디자인을 실제 구현할 수 있도록 분석합니다.

2. 개발
분석을 한 뒤, 종류에 맞게 코딩을 시작합니다. 네이티브 앱의 경우 개발 OS에 맞는 SDK를 이용하여 Java로 개발을 하거나 Object C 언어로 개발하여 각 기기에 최적화된 앱을 만들 수 있습니다. 웹의 경우에는 HTML, CSS, PHP, Javascriopt 등의 일반적인 웹 기술로 개발을 하고, 네이티브와 웹앱의 개발 기술을 적절하게 활용하여 두 종류의 단점을 보완한 하이브리드 앱을 개발할 수 있습니다. 

3. 테스트
테스트 시나리오를 작성하여 다양한 기기에서 테스트해봅니다.

· 앱/웹 개발 비용

위에서 알아본 바와 같이 앱이나 웹을 개발하기 위해서는 다양한 분야의 전문가들을 필요로 하며, 비용은 시간(1 hour) 또는 일(1 day) 대비 인력 단가로 산정합니다. 처음 앱을 기획하는 단계에서 앱의 종류, OS 별 제작, 기능 등이 정리되면 진행 시 투입되어야 할 인원과 기간을 토대로 아래의 공식에 의해 견적을 산출합니다.

직접 인건비 x 투입기간 + 제경비(인건비의 110%)+기술료((인건비+제경비) x 20%)= 개발비용

앱 개발 비용

[모바일 앱 개발 비용 알아보기]

 

Q. 조금 더 저렴하게 앱/웹을 제작할 수 없을까요?
워드프레스, 카페24, Wix와 같은 템플릿을 활용하면 개발과정에서 생략할 수 있는 부분이 생겨 조금 더 간편하고 저렴하게 웹을 만들 수 있습니다.
하지만, 모바일 웹을 만들 때 템플릿에 한정되어 디자인과 개발의 모든 기능을 사용할 수 없다는 제약이 있습니다.

 

지금까지 UXstory와 함께 출시 전까지의 앱/웹 개발과정과 비용을 알아보았는데요, UXstory에서 위와 같은 과정들을 통하여 제작한 앱을 보러 가볼까요?

 

앱이 무엇이죠?

앱이란, 애플리케이션(application)의 줄임말로 써 우리가 사용하는 스마트폰, 태블릿과 같은 기기에 다운로드해 사용할 수 있는 응용 프로그램을 말합니다. 현재 우리는 스마트폰을 사용하면서 카카오톡, 페이스북, 인스타그램과 같은 수많은 앱을 사용하는데, 이런 앱들을 개발하기 위해 어떠한 과정이 필요하고 비용은 어떻게 산출되는지 알아볼까요?

· 앱/웹 개발 과정

앱이나 웹 제작은 일반적으로 다음과 같은 단계를 거치게 됩니다.

Step.1 서비스 기획

생각된 아이디어를 구체화하고, 구체화된 서비스를 이용할 고객을 분석하고 기존의 서비스되는 관련된 사례를 조사하여 트렌드를 분석하여 개발계획을 수립합니다.

1. 아이디어를 구체화
예를 들어, <“길을 안내해 주는 앱”에 AR을 이용하여 사용자가 길을 쉽고 재미있게 찾는다.> 와 같이 생각한 아이디어를 구체화시켜 문서화합니다.

2. 사용자 분석
다양한 방법론을 통하여 사용자가 기존에 있는 유사한 앱을 사용하면서 무엇이 불편하였는지 어떠한 기능이 있었으면 좋겠는지 조사하고 분석하여 고객의 니즈(Needs)를 찾습니다.

3. 환경(트렌드) 분석
앱을 사용할 사용자에 환경과 그에 맞는 트렌드를 조사하여 분석합니다.

4. 개발계획 수립
이 앱을 어떠한 디바이스 또는 플랫폼에
어떠한 종류의 앱으로 사용자에게 사용 경험을 줄지 정한 뒤, 앱 제작 계획을 수립합니다.

 

Step.2 디자인

서비스 기획 내용을 바탕으로, 세부 기능을 정리하여 이 서비스를 어떻게 경험할 수 있게 할 것인가에 대한 UX / UI를 설계하고 프로토타입을 활용해 검토한 뒤, 사용자에게 보여주게 될 GUI를 디자인합니다.

1. UX / UI 설계
기획 단계에서 도출된 자료를 통해 주요 기능과 세부 기능을 리스트 업해서 정리하고 이에 따른 UX / UI를 설계하여 와이어 프레임으로 레이아웃을 구상하여 스토리보드를 통해 사용자가 실제로 보게 될 화면을 설계합니다.
(스토리보드는 UI 설계서, 화면정의서, 시나리오라고도 합니다.)

Q. UX와 UI는 무엇이 다르죠?
UX란, 사용자 경험이라는 총체적인 관점으로 콘셉트를 잡고 개발 방향을 정하는 작업을 말하고, 그것을 구현하는 제작 단계에서 사용자에게 맞는 최적화를 시켜주는 디자인 행위를 UI 디자인이라고 할 수 있습니다.
(오래가는 UX 디자인 반준철 저, 한빛미디어 출판사)

2. 프로토타입(prototype) 제작
와이어 프레임과 스토리보드와 같은 정적인 화면에 인터랙션을 넣어 개발보다 단시간에 실제 구현할 수 있는 프로토타입을 제작하여 사용자 경험에 대한 테스트를 하여 설계 부분 리스크를 사전에 예방합니다.

3.GUI 디자인스토리보드를 보며 콘셉트에 맞춰 사용자가 직접 눈으로 보게 될 그래픽 (색상, 아이콘, 화면)을 디자인합니다.
이때에는 사용자가 어떠한 기능을 사용할 때 메뉴나 버튼, 기타 입력창들을 사용자가 사용하기 쉽도록 직관적으로 쉽게 알아볼 수 있게 디자인하는 것이 중요합니다. (각종 플랫폼 가이드라인을 참고하면 용이합니다.)  
[구글의 Material Design Guidelines 바로가기] [애플의 Human Interface Guidelines 바로가기]
이후 제플린과 같은 프로그램을 활용하여 개발자와의 소통을 원활하게 해 주는 것도 중요합니다.

 

Step.3 개발

디자인이 완성된 화면을 분석하여 실제 구현하고 출시할 수 있도록 개발하고 테스트합니다.

 

1.UX, UI, 디자인 분석
수립된 디바이스, 플랫폼에 따라 UX/UI 설계 단계에서 나타난 기능과 디자인을 실제 구현할 수 있도록 분석합니다.

2. 개발
분석을 한 뒤, 종류에 맞게 코딩을 시작합니다. 네이티브 앱의 경우 개발 OS에 맞는 SDK를 이용하여 Java로 개발을 하거나 Object C 언어로 개발하여 각 기기에 최적화된 앱을 만들 수 있습니다. 웹의 경우에는 HTML, CSS, PHP, Javascriopt 등의 일반적인 웹 기술로 개발을 하고, 네이티브와 웹앱의 개발 기술을 적절하게 활용하여 두 종류의 단점을 보완한 하이브리드 앱을 개발할 수 있습니다. 

3. 테스트
테스트 시나리오를 작성하여 다양한 기기에서 테스트해봅니다.

· 앱/웹 개발 비용

위에서 알아본 바와 같이 앱이나 웹을 개발하기 위해서는 다양한 분야의 전문가들을 필요로 하며, 비용은 시간(1 hour) 또는 일(1 day) 대비 인력 단가로 산정합니다. 처음 앱을 기획하는 단계에서 앱의 종류, OS 별 제작, 기능 등이 정리되면 진행 시 투입되어야 할 인원과 기간을 토대로 아래의 공식에 의해 견적을 산출합니다.

직접 인건비 x 투입기간 + 제경비(인건비의 110%)+기술료((인건비+제경비) x 20%)= 개발비용

앱 개발 비용

[모바일 애플리케이션 제작 과정과 앱 개발 비용 알아보기]

 

Q. 조금 더 저렴하게 앱/웹을 제작할 수 없을까요?
워드프레스, 카페24, Wix와 같은 템플릿을 활용하면 개발과정에서 생략할 수 있는 부분이 생겨 조금 더 간편하고 저렴하게 웹을 만들 수 있습니다.
하지만, 모바일 웹을 만들 때 템플릿에 한정되어 디자인과 개발의 모든 기능을 사용할 수 없다는 제약이 있습니다.

 

지금까지 UXstory와 함께 출시 전까지의 앱/웹 개발과정과 비용을 알아보았는데요, UXstory에서 위와 같은 과정들을 통하여 제작한 앱을 보러 가볼까요?

Recent Posts

UI/UX 수업을 통해 진행했던 프로젝트들을 소개합니다. 2018년도 4학년 1학기 충남대 디자인창의학과 학생들의 수업 내용입니다. 사용자 리서치를 토대로 사용자 모델링, UX컨셉도출, 정보구조설계, 와이어프레임 및 프로토타이핑, App 디자인까지 전반에 걸쳐 진행된 수업이었습니다. 모든 저작물은 Adobe XD를 기반으로 작업하였으며, 저작권은 학생들에게 있습니다....

No Comments

Post A Comment