[ Concept ] 프로젝트 산출물 - 화면설계서

---

Intro

 

안녕하세요. 환이s입니다👋

오늘은 프로젝트에 투입되면서 웹 기획 단계에서 작성하게 될 문서 중 화면 설계서 작성 방법에 대해 포스팅을 해보려 하는데요.

 

화면 설계서는 기획자가 작성하고 난 뒤 개발자들과 회의를 하면서 기술 검토를  할 때 보통 많이 쓰이는데, 저는 지금까지 프로젝트를 진행하면서 화면설계서를 직접 작성했다 보니 글로 남겨보려고 합니다 :)

 

화면 설계서는 쓰는 이유?

 

 먼저 대략적인 Flow를 함께 살펴보겠습니다.

 

위 플로우처럼 각 팀마다 역할이 있고, 프로젝트가 진행되면서 각자의 업무를 담당해서 진행하게 되는데,

화면설계서는 기획팀에서 "프로젝트 문서화"를 작성할 때 생성하는 문서입니다.

 

화면설계서를 작성하고 이를 바탕으로 개발팀과 "협업(피드백/조정)"을 통해 기술 협의를 진행합니다. 

 

검토가 완료되면, 디자인 팀에게 화면 설계서가 넘어가게 되고 디자인팀은 이를 바탕으로 최종 디자인 시안을 확정하기 때문에 기획자, 개발자, 디자이너에게 중요한 기술 문서라고 할 수 있습니다.

 

물론 기획팀, 디자인팀, 개발팀 이렇게 나뉘어서 업무를 진행하면 좋지만... 투입 인원이 적은 프로젝트는 개발자가 기획에 뛰어들어 PM이 하는 업무를 해야 하는 경험하는 일도 발생하곤 합니다..😂

 

 

화면설계서 작성할 때 마인드?

 

 

위에서 언급했듯 화면설계서는 "프로텍트 문서화"를 작성할 때 생성하는 문서라고 했는데, 개발 진행 시에 발생할 수 있는 이슈들을 확인하는 협업자들의 의견을 수렴하고 개선하는 즉, 커뮤니케이션을 위한 문서예요.

 

따라서 가장 중요한 점은

설계서의 목적을 협업자들과의 소통에 중점을 두고 작성하면 훨씬 소통의 오류를 줄일 수 있어요 :)

 

개발자들의 기능에 대한 이해를 돕고, 앞으로 예정된 추가적인 기능들에 대한 개발 방향도 함께 작성해 주는 것이 좋습니다. 

 

실제로 실무에서 단순한 기능이라서 기획자가 부연 설명을 하지 않으면 개발자들은 컴포넌트들 간의 흐름이 어떻게 되는지 모르기에 계속해서 해당 부분에 대해 의견을 요구해야 하므로 시간 낭비를 할 수 있어요.

 

 

 

목적은 정확하게 전달하기

 

협업을 진행하면서 가장 중요한 점은 PM 본인이 기획한 기능에 대해 개발자들에게 명확하게 설명하는 것이 매우 중요해요.

 

해당 프로젝트 아이디어를 모으다가 자신의 아이디어가 채택되어 PM도 되었는데, 아이디어 대로 각 팀에서 기술 이슈를 찾아보다가 명확하게 해당 기능들에 대해 제대로 전달하지 않아서 서로 기능에 대해 다르게 생각하는 상황이 발생할 확률이 높아요.

 

그렇게 되면 개발자들이 본인 생각대로 판단할 가능성이 높아지기 때문에 프로젝트 방향성을 잃고 시간을 낭비하게 되는데... 만약 오픈 시기가 가깝다면.. 생각만으로도 아찔하네요 😮‍💨

 

그렇다면 화면 설계서는 어떻게 작성해야 할까요❓

제가 진행했던 프로젝트 기반으로 설명을 풀어볼게요✌️

 

---

화면 설계서 - 작성하기

 

1. 표지 | 개정이력 | 플로우차트(연동, 화면 관점의 흐름도) | 설계화면 순으로 작성하기
2. 문서 작성 전 UI , 정책, 컴포넌트 등 공통 요소에 대한 가이드를 정의하면 작성이 수월해요.
3. 문서를 보는 모든 담당자들이 화면과 설명에 대해 일관성 있는 이해가 가능하게 작성해야 해요.
4. 특히, 디자인 영역을 침범하지 않는 선에서 화면을 그려주세요.

 

1. 버전 및 파일명 규칙

설계 단계에서 화면설계서를 작성하다 보면 수시로 내용이 바뀌어 많은 버전의 문서가 생성하게 되는데요. 수십~ 수백 가지의 문서를 헷갈리지 않고 효율적으로 관리하기 위해서는 문서 작성 전 버전 관리에 대한 가이드를 잡고, 동시에 동일한 규칙으로 작성된 파일명의 구분이 반드시 필요해요.

 

예시 1)
프로젝트코드_문서코드_화면설계서(문서이름)_도메인구분_1뎁스메뉴(2뎁스메뉴)_버전.PPT
=> HwanVlopProject_DOC_화면설계서_사용자관리_메뉴_v1.0.ppt
예시 2)
프로젝트명_문서유형_버전_날짜.PPT
=> HwanVlopProject_화면설계서_v1.0_2024-12-02.ppt

 

특히, 에이전시의 문서는 고객사와 내부 수행팀이 서로 다른 버전의 문서를 볼 경우 말로 설명하기 어려울 정도로 혼란을 가져올 수 있으니 각별히 신경 써야 해요.

 

여기서 버전 관리를 할 때는

통상 N.NN을 기준으로 하고 프로젝트의 규모 및 가이드에 따라 다를 수 있어요.

 

최초 오픈 시 버전은 1.0으로 기재하고 이후 수정 시에는 1.NN, 재오픈 시 N.0으로 표기하는데, 소수점 각 자릿수의 표기는 프로젝트 내부 가이드를 따라가는 게 좋아요 :)

 

 

2. 개정이력

 

기획자는 최종 산출물을 제외한 모든 문서들의 개정이력을 파악할 수 있어야 해요.

특히 화면설계서에서는 개정이력을 통해 각 화면의 추가, 삭제, 변경사항에 대해 파악할 수 있고 이의 책임담당자 및 검토자, 승인자를 알 수 있어요.

 

이런 내용들은 추후 단위/통합 테스트나 서비스 오픈 후 발생하는 여러 이슈에 대해서 수행사 - 고객사 간의 책임 논쟁에 있어 중요한 증적 자료(근거)가 되기 때문에 반드시 작성해야 해요❗

 

1. 반드시 화면 ID와 그에 해당하는 내용을 기재해 주세요.
2. 개정 일자는 YYYY/MM/DD, YYYY-MM-DD 등 여러 방식을 사용해도 좋지만, 중요한 건 표기방법은 반드시 통일시켜주세요. 검색할 때 혼란 만들지 말기.
3. 단순한 개정일 경우 개정이력에 적지 않고 해당 화면 영역에 기재 후 별도의 표시해 주세요.

 

3. 플로우차트

플로우차트는 순서도, 흐름도라고 불리며, 미리 정한 기호와 연결선으로 서비스의 흐름을 그림으로 표현하는 문서예요.

 

플로우차트를 정확하고 이해하기 쉽게 작성한다면 개발자는 화면과 설명을 보기 전 어느 정도 정리된 생각을 가지고 보다 수월하게 개발을 할 수 있습니다.

 

저는 실무에서 주로 시스템 플로우 차트를 작성하는데, 추가로 증적 자료가 필요하면 유스케이스, 시나리오까지 만들어서 산출물에 추가하기도 합니다.

 

시스템 플로우 차트/ 유스케이스

 

실무에서는 화면이 많다 보니 플로우 차트로 보여줘야 할 텝이 많아서  간단하게 만들어봤습니다.

 

이 외에도 다양한 플로우 차트가 있어서 목적에 맞게 생성하시면 될 거 같습니다.

 

 

4. 화면 설계

실질적으로 구현될 화면을 작성하는 단계입니다.

각 화면에는 사용자가 마주할 모든 요소가 담겨있기 때문에  UI/UX - 기능/비기능 등 고려할 수 있는 모든 사항을 염두에 두고 작성해야 합니다.

 

또한 실제로 프로젝트 수행 시 고객사에 의해 하루에도 몇 번씩 수시로 화면과 기능이 바뀌기 때문에 버전도 철저하게 관리할 수 있어야 합니다.

 

 

• 화면 ID
  • IA, 화면 목록을 작성할 때 사용한 화면 ID를 기재합니다.
  • 프로젝트의 규모가 클수록 화면 ID를 잘못 기재하는 상황이 빈번하게 일어나기 때문에 각별히 주의해야 합니다.
• 화면명
  • 현재 위치한 화면명을 기재합니다.
  • 되도록이면 화면명은 중복되지 않는 이름을 가지는 게 좋아요.
• 화면설명
  • 현재 위치한 화면에 대한 간단한 설명을 기재합니다.
• 처리 유형
  • 현재 위치한 화면의 처리 유형을 체크합니다.
• 화면 레이아웃
  • 사용자에게 보이는 화면을 스케치하는 영역입니다.
  • UI/UX 관점에서 작성해야 하며, 설명이 필요한 요소의 번호와 화면 설명 영역의 번호가 일치해야 합니다.
  • 기능이 다른 요소의 구분이 명확해야 합니다.
• 화면 설명
  • 화면 레이아웃에 부여된 각 번호의 요소들을 글로 풀어내야 하는 영역입니다.
  • 글과 색과 도형들의 역할을 문서를 보는 모든 사람이 이해하기 쉽게 작성해야 합니다.

 

---

마치며

 

지금까지 화면설계서 작성법에 대해 알아봤는데요.

이 전 직장에서는 리뷰 요청이 올 때마다 "이 기능을 왜 개발해야 하는지?" , "왜 필요한지?"라는 질문을 하면서 조율을 했었는데 지금은 제가 직접 작성해서 불필요한 기능과 프로젝트 일정에 타격이 없게 끔 설계하다 보니 편하면서도 할 일이 더 늘어나서 바쁜 삶을 보내는데요😂

 

모두 즐코 하시길 바래요😁

다음 포스팅에서 뵙겠습니다👋