Enjoy Life성공적인 IT프로젝트(외주)를 위한 기획안
close 외주 업무를 하면서 인하우스 환경에서는 만날 수 없는 소중한 클라이언트분들을 만났다. 대부분 온라인 비즈니스를 처음 시작하고자 하는 클라이언트 분들이었는데 공통적으로 처음 IT프로젝트를 시작하는데 어떻게 프로젝트를 진행해야하는 지 모르겠다는 어려움을 이야기하였다. 외주사마다 제각각 다른 비용들, 외주를 통해 얻고 싶은 효과는 알고 있으나 구체적으로 어떻게 디자인되고 개발되어야 하는지의 전반적인 과정을 알 지 못하는 등, 처음 IT서비스를 시작하고자 할 때 의 어려움을 토로하셨던 기억이 있어서 클라이언트의 고민 대부분을 해결해줄 수 있는 IT 기획서(화면구성안 | 화면설계서) 작성 방법과 템플릿을 공유하고자 한다.
클라이언트 모두 스스로 만든 기획서는 전달해주셨지만 처음 제작하신 기획안이기 때문에 어쩔 수 없이 요구사항이 명확하지 않고, 이해하기 난해한 기획안들을 많이 보게 되었다. “나는 UI 디자이너로서 외주를 받은거니까 그냥 기획안에 있는 그림만 보고 그려주면 끝이야!” 라고 생각하기보다는 그래도 UI/UX 디자이너 이기에 일을 맡겨준 클라이언트를 위해 기획안 작성 작업부터 시작하였다. (기획안 비용은 추가로 받았다.)
하지만 보통의 저가형 외주 시장(프로젝트당 천만원 이하)에서 클라이언트는 나를 만났던 클라이언트처럼 운이 좋지 않다. 부족한 기획서로 저가형 외주서비스에 디자인을 의뢰했을 때, 대부분의 경우에는 그 부족한 기획서 그대로 데코레이션 하여 제공한다. 그렇지만 보통 클라이언트들은 그 이상을 기대하기 때문에 불만족한다 혹은 본인도 무엇이 잘못되었는지 모르기 때문에 상당히 흡족스러워 하며 개발 외주사에 의뢰를 맡긴다.
이상한 결과물을 본 개발자는 고민을 하다가 수주를 하기로 한다. 비록 기획안과 디자인에는 데이터를 테이블 형태로 보여줄지, 카드 형태로 보여줄지, 어떤기능인지, 로딩 상태를 어떻게 표현할지, 데이터를 받지 못했을 때의 예외 처리를 어떻게 할지 등 세세한 View의 기획이 없지만 저가개발이니까, 그냥 자기가 가진 코드 템플릿으로 마음대로 해석해서 구현해주기로 한다.
그렇게 클라이언트가 받는 결과물은 돈은 썼지만 이루고 싶은 것은 이루지 못하는 외주시장의 악순환에 빠지게 되는 것이다. 이러한 상황은 외주시장의 디자이너와 개발자가 잘못된것일까? 그럴 수 있지만, 오로지 그들만의 잘못은 아닐 것이다. 이러한 상황에 근본적 원인은 저렴한 비용으로 프로젝트를 주도해줄 디자이너나 개발자를 찾으려는 욕심에서 비롯된다. 외주시장을 저렴하게 이용하기 위해서는 본인이 직접 프로젝트를 주도해야한다. 저렴한 비용에 모든것을 의지할 수 있는 외주파트너는 비싸거나 굉장히 운이 좋아야 한다.
프로젝트를 리드하기 위해서는 전문기획자를 통해 완성된 기획안을 바탕으로 프로젝트를 진행하거나, 10년 이상의 경력이 있는 디자이너, 또는 개발자를 찾는 것이 좋다. 만약 비용을 아끼고 싶다면 자신이 직접 기획안을 작성해야 한다.
화면은 무엇으로 그릴까?
기획안을 작성한다는 것은 머리속에 있는 나의 혁신적인 아이디어를 타인에게 설명하고 이해시킨다는 어려운 행위다 같은 말을 들어도 모두 다르게 상상하고 해석하기 때문에 필연적으로 결과물의 대한 화면을 보여주며 설명을 해야한다, 그렇다면 어떤 툴을 이용하여 화면을 그릴 수 있을까? 예전에는 PPT 하나로 기획하고, Photoshop으로 작업을 했다면 지금은 다양한 인터페이스 디자인/ 설계 툴이 나와있기에 조금만 공부하면 누구나 자신의 상상을 시각화할 수 있다.
Figma
현재 UI/UX 툴중 가장 많이사용하고 있는 Figma 로 대부분의 IT프로젝트는 Figma에서 부터 시작된다고 해도 과언아닌 듯 하다. 기획자, 디자이너 모두 사용하는 만큼 디자이너를 위한 보드나, 커뮤니티에 무료 와이어프레임이 많으니, 이를 이용해 원하는 화면을 간단하게 제작할 수 있다.
피그마 커뮤니티에서 Sass, Website, mobile 화면과 관련된 다양한 와이어프레임을 제공하며 다운로드 하여 사용할 수 있다.
Figma Make
그렇지만 조금도 공부하기 싫은, 가장 효율적인 방법을 찾고 있는 당신을 위해 Figma는 강력한 AI 서비스를 제공하고 있다 그 중 Figma Make라는 툴을 통해 MVP 개발까지 완성시킬 수 있다. MVP를 빠르게 빌드하고 투자자를 만나고 싶은데, 개발자와 디자이너가 없다면, Figma Make를 통해 우선적으로 MVP를 만들어보는 것 도 좋은 방법이다.
만들고 싶은 서비스를 단순히 AI에게 명령하는 것만으로 MVP서비스를 만들어주는 AI서비스로 개인적으로 Open AI, Claude, Gemini 보다 UI적으로 더 괜찮은 결과를 제공하며, 직접 선택하여 부분적으로 디자인을 변경할 수 있다. 그리고 코드 탭을 클릭하여 코드 내용을 확인할 수 있는 것 또한 장점이다.
그러나 유의할게 어디까지나 AI는 MVP 설계 정도로만 사용하는게 좋다는 것이다. AI기술이 더욱 발전하면 모를까 아직까지는 추가되는 코드의 복잡성을 AI가 잘이해하지 못하고, 취약점과 이상한 스파게티 코드들을 많이 볼 수 있다.
PROTOIO
Proto.io는 2011년에 설립된 PROTOIO Inc.에서 개발·운영하는 미국 샌프란시스코 소재의 IT 회사로, 전문적인 웹 기반 프로토타이핑 플랫폼을 제공하며 모바일 앱, 웹, 다양한 디지털 화면 UI를 별도의 드래그 드롭 형식으로 쉽게 만들 수 있어 빠르게 프로토타입을 만들어서 아이디어를 공유하고 싶다면 사용해 보길 추천한다.
기획서 작성방법 (화면구성안)
화면을 만들었다면 이제 직접 기획안을 작성하자 기획안은 산출물이다. 내가 어떤 부분을 목표로하고, 어떤 기능들을 요구했으며, 어떤 커뮤니케이션이 진행됐는지 프로젝트가 어떻게 흘러가고 있는 지 파악할 수 있는 산출물들을 내는 작업인 것이다. 개인적으로 프로젝트의 성공 실패를 분석하고 회고 할 수 있는 첫 번째 단계라고 생각한다.
그리고 외주시장에서는 합리적 금액 산출의 대한 기본 토대이기도 하다. 원하는 바가 명확할 수록 해당 기능과 디자인을 위한 명확한 비용을 산출해줄 수 있다. 아무런 기본 토대 없이 전문가를 찾아가면 어쩔 수 없이 컨설팅 비용을 추가로 내야 된다는 각오를 해야한다. 아니면 자신이 이 프로젝트를 어떻게 생각하고 외주인력에게 정확한 요구, 지시를 할 수 있는 화면설계서를 작성해서 제공해주어야 한다.
기획안 파일
기획안을 작성하는 것은 쉬우면서도 어려운 일이다. 그러므로 처음 IT프로젝트를 기획하는 예비창업자, 사업자도 사용할 수 있는 기획안 예제를 공유한다.
* 실제 프로젝트에서는 슬라이드 마스터를 통해 반복작업을 줄이지만, 예제 파일은 필요한 내용을 임시적으로 만든 것이라 슬라이드 마스터기능을 사용하지 않았습니다.
기획서 구성
기획안의 내용은 기본중에 기본이 되는 내용만 담아내었다. IT기획내용은 기획자 혼자 작성하는 것이 아니다. 기획자의 기획서 뿐만 아니라 개발자의 개발 DOCS(DB설계, 알고리즘 등), 디자이너의 디자인 스타일 가이드 등 관련 내용을 같이 관리하여 산출물과 함께 볼 수 있어야 하며 기획시 개발자, 디자이너와의 커뮤니케이션을 통해 적절하게 자신의 기획안에 녹여낼 줄 알아야 한다.
제목표지
프로젝트의 제목과 내용, 그리고 작성자와 기술검토가 완료됐는지, 프로젝트 진행이 승인되었는지 확인할 수 있는 표지이다. 회사에서 기획내용은 비즈니스의 우선순위의 이유로 승인되지 못하는 기획안들도 있을 수 있고. 기술 검토에서 반려당할 수 있다. 실제 아이디어를 제품으로 출시하는 과정은 디자이너와 개발자의 인력에 따른 비용을 사용하는 일이기 때문이다. 처음 IT사업을 시작하는 사장님일수록 기획방향을 밥먹듯이 바꾸려고 하는 경우가 있기에 기획작업은 시간과 비용, 우선순위에 대한 고려도 들어가야 한다는 것을 강조한다.
목차
목차는 기획안의 전반적인 내용과 흐름을 한눈에 파악할 수 있는 가이드이다. 기획안의 분량이 많을 경우, 페이지 링크를 통해 각 항목으로 쉽게 이동할 수 있도록 구성하는 것이 좋다. 다만 내용이 지나치게 방대하면 읽기 어려운 ‘죽은 기획안’이 될 수 있다. 일반적으로 30장을 초과하면 기획자 본인조차 검토하기 어려워지므로, 초기 기획안이 아니라면 프로젝트 단위가 아닌 기능 단위의 ‘구성안’으로 구분해 관리하는 것을 권장한다.
버전
버전은 이 기획안이 변경된 사유와 변경일시 커뮤니케이션 과정을 기록하는 공간으로, 기획안 자체의 설득력을 만들어낸다. 개발팀(연구소)의 단일 기획으로 임원보고가 되는 것이랑, 마케팅팀, 영업팀, 사업관리팀, 등 다양한 부서를 걸쳐 임원보고가 되는 것은 신뢰성이 다르다. 그리고 기획안 자체의 관점 또한 다양해진다. 하지만 키는 기획자가 조율해가면서 가지고 가야한다는 점도. 어려운 포인트이다.
개요
개요는 기능 개발의 목적과 목표, 그리고 이를 실현하기 위한 기술적 접근 방법을 명확히 보여주는 부분이다.이 내용은 다이어그램 등 시각 자료로 구성해, 기획 의도와 문제 해결 방향을 직관적으로 전달해야 한다. 어떤 불편을 해결하고 어떤 가치를 창출하는지 구체적으로 제시함으로써, 기획의 우선순위를 설득하는 핵심 장표가 된다. 또한 개요는 팀이 공통된 목표와 비전을 공유하도록 돕는 역할을 한다.
사람은 ‘왜 이 문제를 해결해야 하는가’, ‘이 일이 어떤 의미를 가지는가’를 이해하지 못하면 쉽게 동기를 잃는다. 따라서 이는 단순히 비용 투입과는 별개로 , 팀 전체의 동기를 형성하고 방향성을 제시하는 작업임을 인식해야 한다.
IA
정보설계도/구조도로 시각화 한 설계도와 구조도는 권한과 페이지간 관계정보를 표현하기 용이하고, 개발해야할 페이지 정보를 파악하기도 용이하다.그리고 어떠한 분류를 기준으로 페이지를 나뉘고 사용자의 어플리케이션 사용 라이프사이클에 따라 설계되었는지 시각화하여 표현할 수도 있다.
페이지에 대한 설명을 전반적으로 설명하여 프로젝트의 대한 전반적인 내용을 설명할 수 있다. 프로젝트 단위 기획안이 아니라 기능개발단위면 기능 중심으로 분류하여 전반적인 설명을 할 수 있다.
권한
IT 서비스는 지금까지 사용자의 입장에서만 사용할 경우 잘 인식하지 못할 수 있지만 다양한 입장에 관리자와 사용자가 동일한 공간에서 권한에 따라 다르게 사용할 수 있다. 같은 어플리케이션을 사용하지만 그들의 목표는 전혀 다른 것이다. 그렇기 때문에 권한의 설정을 잘 해주어야 한다.
간지
프로젝트의 중간중간 들어가는 간지는 발표도중 잠깐의 쉬는시간을 만들어줄 수 있는 생명줄임과 동시에 아까전과는 다른 기능을 설명하겠다는 구분점이다. 기획안 발표도중 새로운 기능으로 넘어가는 경우 중간에 짚어주지 않으면. 아까와 연결지어서 생각하는 경우가 많아서 기본적으로 넣는 편이다.
화면 구성안
화면구성안의 내용으로 설명하고 싶은 부분을 넘버링하고, 기능의 대한 디테일한 설명을 작성하여 명확한 의도를 작성, 전달한다. 연관된 모달이나, 신규 창을 설명해야 할 시 관련 화면 ID에 화면 ID정보를 입력하여 연관된 화면임을 설명한다. 화면ID는 기획자, 디자이너, 개발자가 소통하는 ‘화면의 주소’ 역할을 하기에 직관성과 확장성을 고려하여 네이밍을 해주는 것이 좋다.
가장 많이 사용하는 방식은 [대분류]-[중/소분류]-[일렬번호] 형태로 구성된다
category - depth - number
예시) MEM-SIGN-001 (회원-가입-첫 번째 화면)
- 대분류: 메뉴나 서비스의 큰 카테고리를 영문 약어로 표기(2~4자리 권장)
- 중/소분류: 해당 카테고리 내의 세부 기능이나 뎁스 (숫자 혹은 약어)
- 일렬번호: 화면의 순서
기획서의 미래
Journal of the Ergonomics Sodety of Korea, Sung Sil Kim, Young Hwan Pan 10.5143/JESK.2021.40.2.101, Epub 2021 May 05, A Study on UX Design Methodology and Process Change due to Tool Change,
UX 디자인 프로세스의 경우 해외와 국내의 큰 편차는 없으나 용어 사용의 차이가 있었으며 UX 설계 단계를 UI 디자인 또는 프로토타입 단계로 진행되고 있었다. 이러한 배경에는 해외의 경우 국내와 달리 UX 설계 즉 국내의 기획 파트의 스토리 보드 작업 과정의 단계가 없었으며 기존의 마케터, 디자이너 또는 개발자가 대신 작업을 수행하거나 협업의 형태로 진행되어 왔기 때문으로 예상된다.
논문에 따르면 해외에서는 UX 설계 단계가 별도로 존재하지 않는 경우가 많다고 한다. 실제로 해외에서는 Figma가 마케터, 디자이너, 개발자가 함께 사용하는 대표적인 협업 도구로 자리 잡았지만, 국내에서는 여전히 디자이너 중심의 툴로 인식되는 경우가 많다.
이는 Figma가 해외에서 개발된 툴이라는 점과, 애자일 중심의 개발 문화가 정착되어 있다는 점과 밀접한 관련이 있다. 해외는 빠른 개발과 배포, 사용자 반응을 기반으로 개선하는 문화가 자리 잡혀 있어, 실시간으로 피드백을 주고받는 협업 구조가 자연스럽게 형성되어 있다.
반면 국내는 워터풀 방식의 문서 중심 프로세스와 Figma 기반 협업 방식이 공존하고 있다. 특히 Figma를 적극적으로 사용하지 않고 포토샵이나 별도의 기획 문서를 병행하는 기업도 많다. 이런 환경에서는 여전히 UX 디자이너가 중심이 되어 기획 단계를 주도하고 있으며, 협업보다는 전달 중심의 프로세스가 반복되는 경우가 많다.
하지만 개인적으로는 회의와 보고를 줄이고, 이해가 필요한 부분만 구두로 설명하며 나머지는 Figma의 코멘트 기능을 통해 소통하는 것이 훨씬 효율적이라고 생각한다. 기획 문서가 발표를 위해 필요할 수는 있지만, 진정한 기획의 핵심은 ‘조율’과 ‘방향성 유지’에 있다.
기획자는 아이디어를 지시하는 사람이 아니라, 서로 다른 관점을 하나로 모아 제품이 올바른 방향으로 나아가도록 이끄는 조율자다. 따라서 완벽한 문서보다 중요한 것은, 모두가 같은 비전을 공유하며 함께 제품을 발전시켜 나가는 과정이라고 생각한다.