웹/앱은 어떻게 만들어 질까?
우리가 쓰는 App/Web은 어떻게 만들어 지는 걸까?
IT에 관심이 있거나, 앱이나 웹 사이트 제작에 관심 있으신 분들은 한번쯤은 '내가 흔히 쓰는 앱/웹 사이트들이 한번 쯤은 어떻게 만들어 졌을까?' 라는 생각을 해보셨을 겁니다.
하나의 서비스가 만들어지고 실제 사용자들이 사용하기까지는 수 많은 작업과 단계를 걸쳐 최종적으로 우리 눈 앞에 보여집니다.
그 중 오늘은 우리가 쓰는 App / Web 이 제작되는 과정에 대해서 설명해 드리도록 하겠습니다!
1단계 - 아이디어 단계App / Web 제작 과정 (1) 아이디어 가상
App / Web 제작에 있어서 가장 첫번째 단계는 아이디어를 생각하는 단계입니다.
App/Web을 만들게 되는 이유는 다양합니다.
1.새로운 아이디어를 통해 기존에 없던 신규 서비스를 출시하기 위해서
2.기존 가지고 있던 서비스가 불편함을 느끼고, 새롭게 리뉴얼하여 서비스를 재출시 하기 위해서
3.어떠한 연구 혹은 가설 등을 세우고 이를 검증하기 위해서
위와 같이 다양한 이유를 App/Web 서비스를 만들게 되며, 이러한 이류를 통해 서비스를 만들고자 할 때
아이디어를 생각하게 되고, 이를 구체화하게 됩니다.
이렇게 아이디어가 구체화 되었다면, 이제 다음 단계인 기획 단계로 들어가게 됩니다.
2단계 기획App/Web 제작 과정 (2) 기획 및 설계
위에 단계인 "아이디어 생성"이 끝났다면 다음은 아이디어에 날개를 달아주고 구체화 시키는 "기획"단계 입니다.
기획 단계에서는 해당 '서비스의 방향을 설정하고, 서비스의 Identity(정체성)을 확립하는 단계'로 모든 단계에서 가장 중요한 단계라고 생각될 만큼 매우 중요한 단계입니다.
기획 단계에서는 보통 어떠한 형태의 서비스로 만들건지, 어떠한 기능이 담길건지, 누구를 대상으로 만들건지 등 중요한 부분에 대해 결정하는 단계로 볼 수 있습니다.
만들고자하는 서비스의 전문성, 회사의 규모에 따라 다양한 단계가 추가 되거나, 축소 될 수 있지만, 보편적으로 기획 단계에서는 아래와 같은 문서 등을 작성하게 됩니다.
요구사항 정의
개발에 필요한 기능에 대한 개발 가능 여부, 중요도, 세부 개발 요건 등을 정의하는 단계입니다.
WBS[Work Breakdown Structure] 작성
프로젝트의 업무를 관리하기 쉽게 매우 작게 세분화하는 단계로 프로젝트 범위를 가장 작은 단계로 분활하여, 도식화한 문서를 의미합니다.
해당 단계에서는 크게는 주차별 작게는 일일의 작업 내용이 표시 되므로, 한 눈에 전반적인 프로젝트의 업무 진행 단계를 예상할 수 있습니다.
기능 정의
각 기능에 대해 어떻게 정의를 내리고, 개발 요건 등이 무엇인지 설명하여, 어떤식으로 구현할건지에 대해 기재합니다.
해당 문서는 기획자, 디자이너, 개발자 등 모든 사람이 볼 수 있으므로 누가 보더라도 한 눈에 이해할 수 있도록 적는 것이 중요합니다.
정보 구조도정보 구조도[Information Architecture]
정보 구조도는 간단히 말해 서비스의 목차 역할을 수행합니다.
Web / App 의 어떻게 구성 되는지, 어떤 기능의 화면으로 보여지는 지를 전체적으로 보여주는 도구입니다.
ex) 곰인형을 통한 예시입니다.
곰인형을 다음과 같이 머리/몸으로 나누고 다시 이를 세부 목록으로 나눈 것을 볼 수 있습니다.
이와 같이 서비스의 목차를 Depth 별로 나열 함으로, 전체적인 서비스의 구조도와 세부적인 구조도 모두를 볼 수 있게 하는 것이 정보 구조도입니다.
화면설계도 - 예제와이어 프레임 & 스토리 보드(화면 설계서)
'와이어 프레임'은 서비스의 모습을 간략하게 넣은 문서를 말하며, 여기에 상세 기능 목록 등을 추가해 해당 화면에서 어떠한 기능이 제공되는지, 어떠한 기능으로 동작이 이루어 지는지를 합쳐 놓은 문서가 '스토리 보드'가 됩니다.
해당 스토리보드를 통해 만들고자 하는 서비스가 대략적으로 어떻게 동작할 것인지, 무슨 기능이 있는지를 시각적으로 파악할 수 있게 됩니다.
기획 단계가 끝나게 되면 이제 전체적인 서비스의 틀이 완성되었다고 볼 수 있습니다.
이렇게 완성 된 기획 문서를 통해 디자인 작업을 진행하게 됩니다.
3단계 디자인App/Web 제작 과정 (3) UI/UX 디자인
디자인 단계에서는 위에서 작성 된 기획 문서를 통해 디자인 작업을 진행하게 됩니다.
"주 된 사용 층은 누구인가", "어떤 기능을 강조할 것인가?", "어떠한 느낌을 주고 싶은가?" 등 다양한 의견을 모집하여 디자인에 들어가게 됩니다.
요즘 흔히들 많이 사용하는 UI/UX 디자인을 진행하게 되는데,
이때 'UI(USER INTERFACE) - 사용자가 제품을 사용/마주 할때 되는 면으로 시각적인 디자인'을
'UX(USER EXPERIENCE) - 사용자의 경험 즉, 사용자가 서비스/제품을 직 간접적으로 사용하면서 느끼는 만족 즉, 사용자의 편의성 고려한 디자인'을 의미합니다.
이렇게 기획에서 수립 된 문서 등과 회의를 통해 디자인이 완성되게 되면 몇번의 수정 단계를 거치게 되고, 최종적으로 수정이 완료 된 디자인 시안을 통해 개발 단계로 넘어가게 됩니다.
4단계 개발App/Web 제작 과정 (4) 개발
개발 단계에서는, 앞서 완성 된 기획 문서와 디자인을 통해 실제 동작을 할 수 있도록 하는 단계를 말합니다.
"어떠한 기능이 실제로 동작할 수 있도록 만드는 단계"
개발 단계에서는 위와 같이 기획서와 디자인을 통해 실질적으로 만들어진 서비스에 기능이 원할하게 동작할 수 있도록 만드는 과정이라 할 수 있습니다.
개발은 크게 FrontEnd 개발과 BackEnd 개발 두가지로 나뉘어 개발하게 됩니다.
프론트 엔드(FRONTEND)
사용자가 웹 사이트 혹은 애플리케이션을 마주했을 때, 사용자가 마주하는 레이아웃 즉, 인터페이스 등을 'FRONTEND'라고 부릅니다.
프론트 엔드는 사용자가 직접적으로 접하는 부분으로, 사용하기 쉽고, 기능적으로 완벽해야 사용자의 사용성을 높이고, 참여를 이끌어 낼 수 있는 부분으로 중요한 부분으로 볼 수 있습니다.
백엔드(BACKEND)
백엔드는 프론트엔드와 달리 용어에서와 같이 뒤에서 관리하는 부분으로, 웹 사이트나 애플리케이션 등의 서버측, 데이터베이스를 관리하는 것을 'BACKEND'로 부릅니다.
프론트엔드가 사용자에게 보여지는 부분이라면 백엔드는 사용자에게 보여지지 않는 데이터 간의 상호작용 등이 이루어지는 부분으로 볼 수 있습니다.
백엔드 또한 데이터를 저장하고 관리하며, 클라이언트 측(사용자)가 요청한 것을 매끄럽게 주고 받을 수 있게끔 해주는 역할을 합니다.
5단계 검수App/Web 제작 과정(5) 검수
개발이 완료 되었다면, 이제 최종적으로 출시 전 검수 단계를 거치게 됩니다.
검수 단계에서는 '기획 단계에서 정의한 것과 같이 의도대로 잘 동작하는지?', '오류나 버그는 없는 지?',
'기능 상에 불편함은 없는 지?' 등 사용자에게 실제로 출시 되기 전 다양한 테스트를 거치게 됩니다.
테스트는 다양한 테스트를 거치게 되는데 크게 아래와 같은 테스트를 거치게 됩니다.
기능 단위 테스트
기능 단위 테스트란 말 그대로 기능을 하나하나 분리하여 테스트 하는 것을 의미합니다.
예를 들어 로그인 기능이 있다면, 해당 로그인 기능이 잘 동작하는지, 로그인 시 문제는 없는지를 테스트합니다.
시나리오 테스트
시나리오 테스트란, 실제 사용자가 해당 서비스를 이용 시 가정하여 테스트를 진행하는 것을 의미합니다.
예를 들어 회원가입을 진행하는 시나리오라고 한다면, 회원 가입하는 과정 속에서 발생할 수 있는 오류 등을 테스트합니다.
기기 테스트
기기 테스트란, 현재 사용자들이 사용하고 있는 기종 등을 대상으로 실시하는 테스트를 의미합니다.
기기 혹은 기종에 따라서 화면 잘림, 기능 미 동작 등 기기에 따라 오류가 발생합니다.
따라서 출시 전 다양한 기기를 테스트하여 기기에 따라 발생할 수 있는 오류를 사전에 발견 하여 이를 고치는 작업을 진행합니다.
위와 같이 테스트가 완료 되면 이제 실제 출시를 진행하게 됩니다.
6단계 출시App/Web 제작 과정 (6) 출시
위의 모든 과정을 끝마치게 되면, 모두가 기다리던 실제 런칭을 하게 됩니다.
런칭을 하게 되면 실제 사용자가 유입되게 되며, 이를 통해 실제 사용자의 반응과 사용도에 대한 데이터를 수집하고, 앞으로의 서비스의 방향성을 설정할 수 있게 됩니다.
오늘은 전반적인 App / Web 서비스가 만들어지는 과정을 알아보았습니다.
서비스를 만들어지는 과정은 알았지만, 대부분은 서비스를 직접 만들기보다는 외주를 통해 제작을 하시게 됩니다.
따라서 다음 번 2부에서는 [성공적인 웹/앱 외주 제작을 위해 알아야 할 꿀 Tip!]을 정리해서 전달드리도록 하겠습니다!
