4편. IT 기획의 이해 - 서비스 구현
IT 차원으로 입문
[IT 기획의 전체의 모습 이해하기]는 아래와 같이 총 4편으로 나누어 연재됩니다. 본 내용은 '일정 계획 및 비용 산정' 편입니다.
4. 서비스 구현
서비스 구현
서비스 기획 단계에서 어떤 서비스를 할지 정했고, 일정과 비용 그리고 제작을 회사 내부 인원으로 제작할지 외주 업체에 의뢰할지 등이 모두 정해졌다면 실제 제작하는 단계로 접어듭니다. 이를 서비스 구현 단계라고 하는데요. 서비스 구현 단계는 화면 설계, 디자인, 퍼블리싱, 개발, 테스트의 5단계로 공정 과정을 거치게 됩니다.
① 화면 설계 단계
설계 단계에서는 기획자가 서비스를 제작하기 위한 구조 설계 및 화면 설계를 하게 됩니다. 첫 번째로 구조 설계를 하게 되는데요. 정보 구조 설계(IA : Information Architecture)란 서비스에서 필요한 메뉴들을 정의하고, 정의된 메뉴들을 유사성, 연관성 등을 토대로 그룹을 만드는 것을 말합니다. 쉽게 생각한다면 PC의 많은 파일들을 용도에 맞게 폴더를 만들고 폴더 안에 파일들을 분류하여 정리하는 과정과 비슷하다고 생각하면 됩니다. 이렇게 정보 구조 설계가 완료되면, 필요에 따라 기능 정의서, 정책 정의서를 작성하고, 정보 구조 문서, 기능 정의서, 정책 정의서의 내용을 기준으로 화면을 설계하게 됩니다. 화면 설계는 실제 이용자가 이용하는 화면을 설계하고, 디자이너, 퍼블리셔, 개발자가 화면을 보고 구현 작업을 할 수 있도록 설계서를 작성하는 작업을 말합니다. 이 문서의 이름은 화면에 대해서 정의를 내린다는 뜻에서 ‘화면 정의서’라고 하며, 회사마다 스토리보드(SB : Story Board), 화면 기획안, 화면 설계서 등 여러 이름으로 불리고 있습니다. 화면 정의서는 보통 마이크로 소프트 사의 파워 포인트로 많이 작성하지만, 최근에는 액슈어, 어도비 XD, 피그마 등 프로토타입 툴 프로그램을 사용하여 작업하기도 합니다. 그리고 이 설계 단계에서 서버 개발자는 서비스 기획안을 토대로 서버 및 네트워크를 구성하고 개발에 필요한 프로그램 설치, 도메인 연결 등을 하기도 합니다.
메인 화면의 기획은 모든 화면의 설계를 마친 후 가장 마지막에 하는 것이 좋습니다. 메인 화면은 여러 메뉴의 주요한 내용만 보여주는 화면이기 때문에 서브 화면들을 모두 설계가 되어야 메인에 배치할 내용도 명확해지기 때문입니다. 하지만 메인 화면은 이용자를 대면하는 첫 화면으로 가장 중요하고, 디자인 시안을 결정하는데 기간이 오래 걸리기 때문에 서브 화면 기획 전 서브 화면에 기획될 내용을 최대한 유추하여 가장 먼저 화면을 설계한 후 메인 화면만 우선 디자인을 진행하는 것이 일반적 업무 순서로 상용됩니다. 이렇게 먼저 디자인된 메인 화면을 토대로 메인 화면 분위기를 미리 짐작하여 서비스 방향성과 맞는지 더 좋은 디자인은 없는지, 문제점이 있다면 해결책은 무엇인지를 사전에 고민할 수 있습니다.
② 디자인 단계
디자인 단계에서는 기획자가 작성한 화면 정의서를 토대로 디자이너가 디자인하는 단계를 말합니다. 포토숍, 일러스트, 어도비 XD, 피그마 같은 프로그램을 이용해 폰트, 화면에 사용될 주요 컬러, 레이아웃 등을 결정하여 디자인하게 되는데요. 실제 사용될 이미지를 넣기도 하고, 버튼 및 메뉴바(GNB : Global Navigation Bar)의 컬러, 분위기가 고려된 폰트 적용 등 실제 화면으로 구성될 요소들로 디자인 파일을 제작합니다. 그림 그리기와 비교해 본다면 화면 정의서에 밑그림만 그려져 있다면 디자인은 밑그림에 채색하는 작업이라고 생각하면 됩니다. 그리고 최근에는 UX(User Experience) 디자인이라고 하여, 화면 정의서에 정의된 기능들을 목적이 훼손되지 않는 범위 내에서 사용자가 더 이용이 편리하도록 레이아웃을 변경하거나, 버튼의 위치를 조정하는 등 사용자 편의성을 높이기 위한 작업을 하기도 합니다.
③ 퍼블리싱 단계
퍼블리싱 단계에서는 기획자가 작업한 화면 정의서, 디자이너가 작업한 디자인 산출물을 가지고, 퍼블리셔가 웹 전용 문서로 제작하는 단계를 말합니다. HTML(Hypertext Markup Language), CSS(cascading style sheets), 제이쿼리(jquery) 등을 활용해 작업합니다. 우리가 흔히 사용하는 파워포인트, 엑셀 파일은 파워포인트, 엑셀 프로그램에서만 열리고 작동하듯이 사이트도 인터넷 익스플로러(Internet Explorer), 크롬(Chrome) 등 웹 브라우저(Browser)를 통해서만 볼 수 있습니다. 이처럼 웹 브라우저에서 설계된 화면을 볼 수 있도록 작업하는 것을 ‘퍼블리싱’이라고 말합니다. 퍼블리싱 작업이 완성되면 HTML, 제이쿼리에서 지원되는 기능들로 드롭다운 메뉴, 체크박스, 라디오 버튼, 문자 입력 박스 등이 동작하는 것을 웹 브라우저를 통해 확인할 수 있습니다. 하지만 아직 개발된 것이 아니기 때문에 설정된 사항이 저장되거나, 등록된 이미지가 보이거나, 연산이 필요한 기능들은 작동되지 않습니다.
④ 개발 단계
개발 단계에서는 기획자가 작업한 화면 정의서, 퍼블리셔가 작업한 웹 전용 파일을 가지고 웹 개발자가 화면을 기획한 의도대로 동작할 수 있도록 개발하는 작업을 말합니다. 웹 페이지에 사용자가 입력한 정보를 서버에 저장하고, 사용자가 요청할 때 저장된 정보를 다시 호출하여 보여주기도 합니다. 그리고 상품의 가격에 할인 금액, 배송비 등을 계산하기 위해 수식을 넣어 결제 금액을 산출하기도 하며, 외부 서버와 통신(API: Application Programming Interface)을 주고받으며, 우리가 갖고 있지 않은 정보를 외부 서버에서 가져와 화면에 노출하는 등의 작업을 합니다. 자동차의 외형을 다 만들었다면, 각종 전자 기기 등을 연결하고 엔진을 조립하여 자동차가 실제 운행될 수 있도록 만드는 작업이라고 생각하면 됩니다.
⑤ 테스트 단계
테스트 단계에서는 개발까지 완료된 사이트를 기획 의도와 같이 제작되었는지 확인하는 단계입니다. 테스트는 보통 화면을 설계한 기획자가 진행하기도 하지만, 규모가 큰 기업이나 오류 하나가 큰 영업 손실로 작용하는 운영 중인 서비스를 리뉴얼한 경우에는 QA팀이 구성되어 QA(Quality Assurance)를 진행하기도 합니다. QA이란 웹/앱 서비스도 하나의 제품으로 생각하여 서비스의 품질을 점검하는 것으로, 일반적인 테스트와는 달리 더욱 체계적이고, 전문적인 방법으로 테스트하는 과정입니다. 테스트 단계에서 발견된 오류는 원인을 분석하고, 원인이 발생된 단계(기획, 디자인, 퍼블리싱, 개발)의 오류 사항을 수정하고, 다시 테스트하는 등의 반복 과정을 거치며 서비스의 완성도를 높여갑니다. 서비스가 완성되면 오픈 시기를 정하여 이용자에게 오픈하게 됩니다.