전국기능경기대회 웹디자인 및 개발부문에 출전하기 위해 PHP와 JavaScript를 공부하려 합니다. 학교에서 특강을 마련하여 인스타그램을 만들어보는 프로젝트를 진행하기로 결정했습니다.

대회를 준비하는 만큼 출제자의 의도를 파악하고 기능을 구현하는 것이 중요하기 때문에, 이번 프로젝트는 요구사항 작성, 데이터베이스 설계, 화면 구현 설계, 개발 단계로 진행할 예정입니다.

이번 편에서는 요구사항을 만들어보도록 하겠습니다.

먼저 인스타그램에 접속하여 어떤 엘리먼트가 있는지 살펴보고 왼쪽, 중앙(메인), 오른쪽 탭 별로 기능을 작성해보겠습니다.

개인정보 이슈로 인해 모자이크 처리를 했지만, 인스타그램 사용 경험이 있는 분들은 쉽게 알 수 있을 것입니다.

왼쪽 탭

탭 이름	필요한 이유
홈	사용자가 팔로우 하고 있는 사람들의 스토리와 피드(게시글)을 볼 수 있습니다.
검색	사용자가 원하는 게시물, 사용자, 해시태그를 찾을 수 있도록 검색 기능을 제공합니다.
탐색 탭	사용자에게 다른 사용자들이 올린 게시글을 볼 수 있습니다.
릴스	다른 사용자들이 업로드 한 짧은 세로 영상을 볼 수 있습니다.
메시지	사용자가 다른 사용자들과 개인 또는 그룹 대화를 나눌 수 있습니다. 텍스트를 주고 받으며 사진, 동영상도 전송 할 수 있습니다.
알림	사용자의 활동에 대한 알림을 확인하고 새로운 게시물이나 좋아요, 팔로우 요청 알림을 받을 수 있습니다.
만들기	사용자가 새로운 게시물, 스토리, 릴스를 만들고 공유할 수 있습니다.
프로필	사용자가 자신의 프로필 정보와 게시물 목록, 스토리 하이라이트 등을 확인할 수 있으며 프로필 수정, 팔로우/팔로워 등을 확인 할 수 있습니다.
더보기	설정, 계정 전환 등의 기능을 제공합니다.

오른쪽 탭

탭 이름	필요한 이유
내 프로필	본인의 프로필을 확인 할 수 있고 계정을 전환할 수 있어야 합니다.
회원님을 위한 추천	내가 팔로우 하고 있는 사용자들이 팔로우 하는 다른 사용자를 추천해줍니다.

메인 탭

탭 이름	필요한 이유
스토리	내가 팔로우 하고 있는 사용자들이 업로드 한 스토리를 확인 할 수 있어야 합니다.
게시글(피드)	내가 팔로우 하고 있는 사용자들이 업로드 한 피드를 확인 할 수 있고 좋아요나 댓글을 작성 할 수 있어야 합니다.

이렇게 각 탭을 3개로 분리하여 각 탭마다의 기능을 작성해보았습니다.

요구사항 추출하기

이 글에서는 인스타그램 웹 프로젝트에서 필요한 요구사항을 추출해보겠습니다. 이 프로젝트의 메인 페이지는 크게 3개의 탭으로 나뉘어져 있습니다. 또한 회원 관련 기능들이 공통적으로 필요합니다.

회원 관련 기능

기능 명	필요한 이유
회원가입	사용자가 서비스를 이용하기 위해 자신의 계정을 생성하고 정보를 등록할 수 있어야 합니다.
로그인 및 로그아웃	사용자가 생성한 계정을 통해 서비스를 이용할 수 있어야 하며, 보안을 위해 사용을 끝낸 후에는 로그아웃을 할 수 있어야 합니다.
비밀번호 변경 및 찾기	사용자가 기존 비밀번호가 유출되거나 보안상 위험하다고 판단하였을 때 변경할 수 있어야 하고, 비밀번호를 잊어버렸을 때 새로운 비밀번호를 설정할 수 있어야 합니다.
팔로우/팔로워 정보	사용자가 팔로우하거나 사용자를 팔로우 하는 팔로워 정보를 저장하고 조회 할 수 있어야 합니다.

게시글 관련 기능

기능 명	필요한 이유
게시물 생성 및 수정	사용자가 게시물을 작성하고 수정, 삭제할 수 있는 기능을 제공합니다. 게시물에는 이미지나 동영상, 해시태그를 추가할 수 있습니다.
댓글 작성 및 수정	사용자가 게시물에 댓글을 작성하거나 수정, 삭제할 수 있는 기능을 제공합니다.
좋아요	사용자가 게시물이나 댓글에 좋아요를 누르거나 취소할 수 있습니다.
게시글 보기	메인 탭에 게시글이 업로드된 날짜, 시간 순으로 정렬되어 표시되어야 합니다.

이렇게 3개로 분리된 탭에서 필요로 하는 기능을 작성해보았습니다.

마치며

막상 작성하고 보니 화면 구현 설계를 한건지 요구사항을 작성한건지 모르겠지만 프로젝트를 진행하며 피드백을 받다보면 점점 요구사항과 화면 설계의 경계가 나누어 질 것 이라고 생각합니다.