HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🎄
노아팀
/
💬
노닥노닥
/
기획서

기획서

notion image
서비스 소개
네이밍 의도
주요 기능
아이디어 선정 및 디자인 설정
아이디어 회의
화면 구상도
디자인 시스템
유저 스토리

노닥노닥 서비스 소개

투표 플랫폼으로 가벼운 이야기부터 선택이 어려운 사람들을 위한 대신 선택, 이용자들의 고민 상담까지 다양한 의견을 나눌 수 있는 공간을 제공합니다.

네이밍 의도

노아 팀의 속닥속닥 이용자들이 함께 노닥거리며 시간을 보낼 수 있기를 바라는 의도

주요 기능

🔐
인증 - 회원 가입을 진행할 수 있습니다. - 로그인을 진행할 수 있습니다.
📄
게시글 - 전체 게시글을 조회할 수 있습니다. - 게시글을 생성, 수정, 삭제할 수 있습니다. - 게시글의 상세 페이지를 확인할 수 있습니다. - 게시글 내 투표, 댓글, 좋아요를 이용할 수 있습니다.
🔍
검색 - 채널별 게시글을 검색할 수 있습니다. - 사용자를 검색할 수 있습니다.
🔔
알림 - 알림 창을 통해 전달 받은 알림을 확인할 수 있습니다.
👤
사용자 페이지 - Avatar 기능을 통한 프로필 사진을 이용할 수 있습니다. - 사용자에 대한 팔로잉, 팔로워, 게시글의 수를 확인할 수 있습니다. - 내 정보를 수정할 수 있습니다. - 로그아웃을 할 수 있습니다. - 활동 내역 잔디밭, 레벨을 확인할 수 있습니다.
ℹ️
기타 - 레벨은 댓글, 게시글 작성, 좋아요를 통해 올릴 수 있습니다. - 잔디의 출석률은 Board를 통해 확인할 수 있습니다.
 

아이디어 선정 및 디자인 설정

아이디어 회의

화면 구상도

디자인 시스템

유저 스토리

User Story
페이지
유저스토리
인증
특이사항
우선순위
작업 여부
Index
노닥노닥의 요약과 메인 페이지로 이동하는 버튼이 존재한다.
비인증
요약에는 이미지화 된 내용이 포함된다.
1
작업 전
404
유저는 잘못된 접근을 했을 때 404 페이지로 접속할 수 있다.
1
작업 전
메인
다크모드를 선택할 수 있다.
무관
로그인한 사용자는 기존에 저장했던 다크모드를 유지한다.
3
작업 전
메인
Header에 채널선택과 로그인버튼이 존재한다.
비인증
비 인증상태이기에 로그인버튼이 존재한다.
1
작업 전
메인
Header에는 Avatar | Notification 이 존재하며 Avatar는 간단한 User정보를 Modal창으로 보여주며 User페이지로 라우팅을 발생시킨다. Notification아이콘은 알림내역을 모달창으로 보여준다
인증
로그인버튼은 없어지고 사용자의 데이터가 포함된다. USER 데이터는 페이지 라우팅을 발생시킨다.
2
작업 전
메인
Nav에는 온라인 접속자 - 오프라인 접속자가 보여진다.
무관
온라인 접속자와 오프라인 접속자는 뱃지를 통해 구분하며 인증된 사용자의 경우 팔로우 한 접속자는 하트뱃지가 부여된다.
1
작업 전
메인
Nav에 존재하는 온라인 사용자를 클릭하면 Modal창을 통해 간단한 데이터정보를 확인하고 DM을 전송할 수 있다.
인증
3
작업 전
메인
초기에는 모든 채널의 게시글이 렌더링되며 각 세부채널별 POST를 렌더링시킬 수 있다.
무관
채널선택을 통해 변경할 수 있다.
1
작업 전
메인
게시글 생성이라는 버튼을 통해 게시글 생성 페이지로 이동한다.
인증
페이지 라우팅 발생
2
작업 전
메인
아래는 게시글의 PageNation이 존재한다.
무관
2
작업 전
메인
하나의 POST는 TITLE, 투표자수, 댓글수, 좋아요 수 등이 포함된다. 또한 결과보기버튼을 통해 인증없이 결과를 확인할 수 있다.
무관
인증된 사용자만이 버튼을 클릭할 수 있다.
1
작업 전
메인
모바일 버전의 경우 PageNation이 아닌 무한스크롤을 아래로 내리면 더 많은 Post가 보여진다.
무관
4
작업 전
메인
채널선택의 항목 중 Follow한 사람들의 Post가 보여지는 채널이 존재한다.
인증
인증하지 않은 사용자는 Follow가 존재할 수 없다.
3
작업 전
로그인
이메일과 비밀번호를 입력받아 로그인을 진행한다
비인증
1
작업 전
로그인
소셜로그인을 진행한다.
비인증
Google, Kakao
3
작업 전
회원가입
이메일과 비밀번호, 비밀번호 확인 3개의 데이터를 전달받는다. 비밀번호는 정규표현식을 통해 데이터를 검증하고, 이메일은 이메일 타입으로 전달받는다.
비인증
1
작업 전
게시글 작성
content, title, image, channel를 입력해 POST를 생성할 수 있다.
인증
유저가 생성하고자 하는 채널을 선택할 수 있다.
1
작업 전
게시글 상세
Title 과 Content가 렌더링된다.
인증
1
작업 전
게시글 상세
선택항목에서 다양한 선택항목이 존재하고 버튼클릭으로 인해서 투표를 진행할 수 있다.
인증
2
작업 전
게시글 상세
댓글을 추가할 수 있다.
인증
댓글창은 버튼을 통해 활성화 / 비활성화 되도록 한다.
2
작업 전
게시글 상세
댓글을 삭제할 수 있다.
인증
2
작업 전
게시글 상세
좋아요 버튼을 통해 해당 POST를 좋아요 할 수 있다.
인증
2
작업 전
투표 결과
게시글 상세에서 진행된 투표의 결과를 Progress를 통해 화면에 보여준다.
인증
1
유저페이지
Avatar에 이미지를 추가할 수 있다.
인증
링형식의 프로필사진을 업데이트 할 수 있다.
2
작업 전
유저페이지
유저는 본인의 페이지의 경우 수정 버튼을 통해 본인의 데이터를 수정할 수 있다.
인증
수정하는 페이지로 라우팅이 발생한다.
2
작업 전
유저페이지
팔로워와 팔로잉한 숫자를 볼 수 있다.
인증
2
작업 전
유저페이지
유저가 작성한 포스트를 볼 수 있다.
인증
1
작업 전
유저페이지
잔디밭 , 레벨이 화면에 표시된다.
인증
2
작업 전
DM
대화를 나눈 상대를 확인할 수 있다.
인증
3
작업 전
DM
특정상대와의 대화를 나눌 수 있다.
인증
3
작업 전

🔝