프론트 개발자의 기능명세서 작성하는 법🧐

안녕하세요, 주인장입니다.

지난시간 까지는 PM의 역량을 쌓는 시간이었다면 오늘은 공부한 내용을 바탕으로 기능 명세서를 작성해보는 시간을 가져 보겠습니다.

들어가며,

현재, 저는 현재 프로젝트 진행을 시작하고 있는 단계이고, 개발 전에 팀원들과 기능에 대한 논의 후, 문서로 명확하게 하는 단계를 진행했습니다.

개발자들만 모인 팀이라서, PM과 디자이너의 일을 프론트 개발자가 하고 있는 상황이라는 점도 알아주세요!

기능 명세서가 무엇인가요?

프로그램에서 처리해야 할 기능을 구체적으로 세분하여 그 기능을 정의하고, 입출력 요건과 프로그래밍에 필요한 논리 개념을 정리하는 문서.

저는 팀 프로젝트를 몇 번 해봤는데 기능 명세서까지 명확하게 쓰는 프로젝트는 이번이 처음이라 개념은 이해했지만 어디서부터 어떻게 적어야할지 많이 막막했습니다.

기능 명세서를 적다보니 가장 크게 느낀 점은 개발자들이 기능 명세서를 보면서 개발을 해야 협업이 매우 잘된다는 것이었습니다.

기능 명세서가 중요한 이유

• 해당 기능을 왜 구현해야하는지도 모든 개발자가 잘 이해하고 있습니다.
• 앞으로 구현해야할 기능들을 충분히 인지하여, 추가적인 개발을 하지 않아도 됩니다.
• 타 팀원들과의 협업이 잘 되고, 개발이 돌아가지 않습니다(실수를 하지 않습니다).
• 비대면으로 협업하는 팀에게는 원활한 협업에 도움을 줍니다. 팀원들이 한 기능에 대해 각각 다른 생각을 가질 수 있기 때문입니다.

기능 명세서를 작성하면서 앞으로 팀 프로젝트에서도 필수적으로 잘 작성해야 겠다는 생각이 들었습니다. 이 글을 읽는 개발자분들도 한 번 본인들의 프로젝트에 기능 명세서를 작성해 보시면 좋을 것 같습니다.

필수 구성 요소?

기능명세서는 작성자의 주관이 매우 들어가서 명세서에 정답은 없습니다.
저는 화면 / 세부페이지/ 기능/ 부가 설명 이 꼭 들어가야한다고 생각했고,
뭐가 들어가야할까라고 생각한다면 이 문서를 보고 프로젝트에 참여하는 전 팀원이 이해해야한다! 라는 생각으로 쓰면 됩니다.

기능 명세서 작성 툴

노션

저는 기능 명세서를 작성할 때, 노션을 활용했습니다. 기능 명세서 예시를 많이 찾아봤었는데, 엑셀/워드/노션/draw.io 등등 수 많은 툴로 작성된 문서 들을 확인할 수 있었습니다. 저는 그 중에서 노션의 표기능을 활용해 작성했습니다. 작성자가 편한 툴로 기능 명세서를 작성하시면 됩니다.

기능 명세서 본격적으로 작성하기

1) 구성 요소 확정

저는 최종적으로 아래의 구성 요소를 기준으로 명세서를 작성하기로 결정했습니다.

화면 / 세부 페이지 / epic / 기능 / 부가 설명 / 구현 여부 / 디자인 여부

구성 요소를 먼저 정하면 뭘 적어야할지를 쉽게 생각할 수 있기 때문에 이를 먼저 확정하시길 바랍니다.

2) 노션의 표 기능 활용

노션의 표 기능을 활용하여 1)의 구성 요소를 삽입하고 작성을 시작했습니다.

epic만 "다중 선택" 속성으로 설명하고 나머지 구성요소들은 텍스트로 설정했습니다.

이제, 본격적으로 기능명세서를 채워보겠습니다. 제가 실제로 작성한 예시를 들면서 설명해드릴테니 천천히 생각해보시면서 따라오시면 됩니다:)

3) 화면 속성 작성하기

루트 속성을 가진 화면을 먼저 작성해주어야 합니다.
여기서 화면에 들어가는 것은 구현하려는 프로젝트의 화면이 무엇이 필요할 지 먼저 생각하시면 됩니다. 기능명세서를 작성하기 전에 화면 설계서를 작성하는 경우도 있지만 이는 순서가 뒤바뀌어도 상관없습니다. 어떤 화면이 필요할 지 구체적으로 생각 후, 해당 카테고리에 넣어주시면 됩니다.

4) 세부 페이지 작성하기

세부 페이지는 3)번의 화면에서 세부적으로 구현되는 페이지를 작성해주시면 됩니다.
예시로 3)의 화면에는 "계정 등록 페이지"라고 작성했다면, 이에 대한 세부 페이지는 "회원가입" , "로그인" 페이지를 작성해주시면 됩니다.

5) Epic 작성하기

Epic에는 표 열 각각이 의미하는 전체적인 기능을 의미합니다. 예를 들어 회원가입에 대한 내용을 작성한다면, 세부적으로 생각을 해보았을때, 회원가입에 필요한 다양한 요소들이 있죠? 이름 / 아이디 / 비밀번호 / 이메일 등등이 있을 겁니다. 최상단 사용자 스토리를 이 에픽에 작성하는 것입니다. 사용자의 입장에서 해당 기능을 표시하는 것으로 이에 대한 에픽은 "회원 관리"가 될 수 있습니다.

6) 기능/ 설명 작성하기

위에서 예를 들었던 회원가입을 가지고 생각해보겠습니다. 회원가입에는 이름 / 아이디 / 비밀번호 / 이메일 이 필요하고 이 각각의 요소들에 세부적인 기능을 추가한다고 합의했다고 합시다.

• 이메일 : 이메일의 형식을 지키지 않으면 회원가입을 막는 기능을 추가했습니다.
• 닉네임: 중복된 닉네임이 있다면 회원가입을 막는 기능을 추가했습니다.
  혹은 닉네임은 최대 ??글자까지만 가능하도록 한다는 기능을 추가했습니다.
• 아이디 : 아이디 중복 확인을 하는 기능을 추가했습니다.
• 비밀번호: 8자이상/ 영문 포함의 조건을 만족해야한다는 기능을 추가했습니다.

이렇게 각 요소들 별로 기능을 넣어야 한다면 각각 세부적으로 자세히 적어주는 것이 좋습니다. 따라서 기능에는 " 이메일 형식 확인 " 을 작성하고 설명에는 "이메일의 형식을 지키지 않으면 회원가입을 막는 기능"을 작성해주시면 됩니다.

7) 추가로, 구현 여부

추가로 저는 해당 기능들을 다 구현했는지 체크박스를 삽입해 각 팀들의 현재 개발 상황을 확인 할 수 있게 했습니다. 이것은 칸반보드와 비슷한 역할을 합니다.

8) 완성된 기능명세서 예시

위는 제가 작성한 기능명세서 예시입니다. 사진으로 보니까 조금 더 이해가 잘 되시나요?

기능명세서에 정답이란 없습니다. 제가 생각하는 가장 큰 목적은 모든 팀원들이 기능명세서를 보고 해당 기능을 전체적으로 다 이해하고, 개발 실수(필요없는 기능을 구현한다거나, 한 기능에 대해 다른 생각을 가지는 경우)를 줄여주는 것이 목적이라고 생각합니다.

개발하시기 전에 꼭 팀원들과 기능명세서를 작성해보시고 공유하시길 바랍니다! 감사합니다:)