"오늘 저녁에 누가 오지?" "다음 모임 일정이 언제였더라?" "모임원들한테 하나하나 연락하려니 너무 번거롭네..."
모임을 관리하는 일이 스트레스였다면, 내가 원하는 모임을 어디에서 찾아야 할지 고민이었다면,
‘네모’가 그 답이 되어 드립니다.
NE:MO는 모임 운영에 필요한 모든 기능을 담은 올인원 모임 관리 서비스입니다.
✨ 주요 기능 안내
1️⃣ 관심사별 모임 생성 & 관리 취미, 스터디, 동호회 등 다양한 카테고리로 모임을 만들고 체계적으로 운영할 수 있어요.
2️⃣ 관심 모임 탐색 회원가입 없이도 다양한 모임을 둘러볼 수 있어요. 내 관심사에 꼭 맞는 모임을 찾아보세요.
3️⃣ 참석 현황 한눈에 확인 참석 / 불참 / 미응답 현황을 한 화면에서! 개별 확인 없이 효율적인 참석자 관리가 가능합니다.
4️⃣ 내 모든 모임 일정, 한곳에서 관리 내가 참여 중인 모든 모임과 일정을 ‘내 정보’ 탭에서 통합 관리해보세요. 참석 가능 여부도 한눈에 확인할 수 있어요.
🔗 배포 URL: https://nemo.ai.kr
(현재 한정된 비용으로 Closed 상태입니다)
1. 서비스 소개 💨
2. 팀원 소개 💨
3. 프로젝트 기간 💨
4. 아키텍처 💨
5. 기술 선정 💨
6. 성능 개선 💨
7. 폴더 구조 💨
8. 컨벤션 💨
9. 협업 방식 💨
10. 기타 문서 💨
프론트엔드 개발과 팀장 역할을 맡아 총 6명으로 구성된 팀을 운영하였습니다.
25/03/31 - 25/08/01
| 기간 | 작업 내용 |
|---|---|
| 03.31 ~ 04.13 | 서비스 기획, 화면설계서 |
| 04.14 ~ 04.27 | 기술 선정 및 설계 |
| 04.28 ~ 05.11 | MVP 개발 |
| 05.12 ~ 07.27 | 유지보수 및 리팩토링, 기능 업데이트 |
버전별 아키텍처와 원본을 링크에서 확인하실 수 있습니다.
저희 서비스에 적합한 기술을 고려하였습니다. 기술 선정 이유는 포트폴리오에서 확인하실 수 있습니다.
| 분류 | 기술 | 버전 |
|---|---|---|
| 런타임 | Node | 22.13.0 |
| 언어 | TypeScript | 5.7.3 |
| 코어 | Next.js, React.js | 15.3.1, 19.0.0 |
| 스타일링 | TailwindCSS, tailwind-variants | 4.1.4, 1.0.0 |
| 아키텍처 | FSD | |
| 상태관리 | Zustand | 5.0.3 |
| 빌드 | Webpack, Turbopack | |
| 패키지 매니저 | Pnpm | 10.10.0 |
| 테스트 | Jest(Unit)/Playwright,Cypress(E2E) | 29.7.0/ 1.52.0. 14.3.2 |
| 유효성 검사 | Zod, React-hook-form | 3.24.3, 7.56.1 |
| 디자인시스템 | Shadcn | 29.7.0 |
| 기타 | eslint,es-toolkit, prettier, js-conefetti | 9.25.1, 1.36.0, 3.5.3, 0.12.0 |
일정 참여 응답 시 UI 반영까지 최대 2초 이상 소요되는 문제가 있었고,
사용자는 액션 결과를 즉시 확인할 수 없었습니다.
또한 API 통신 과정에서 불필요하게 3번의 렌더링이 발생해 UX가 저하되고 있었습니다.
사용자가 즉각적으로 액션 결과를 확인할 수 있도록 UI 반응 속도를 개선하고,
불필요한 렌더링을 줄여 매끄러운 UX를 제공해야 했습니다.
- React Query의 낙관적 업데이트 패턴을 구현
- 사용자 액션 발생 시 예상 결과를 즉시 UI에 반영
- 서버 통신은 백그라운드에서 처리, 실패 시 UI 롤백
- UI 반응 시간 2초 → 즉시 (100% 개선)
- 렌더링 횟수 3회 → 1회 (67% 감소)
- 즉각적인 사용자 피드백 제공 및 매끄러운 UX 구현
초기 로딩 시 대용량 JavaScript 번들로 인해 로딩 시간이 길어졌고,
사용자가 페이지를 빠르게 확인하기 어려웠습니다.
번들 크기를 줄이고 초기 로딩 속도를 개선해
사용자가 더 빠르게 콘텐츠를 확인할 수 있도록 해야 했습니다.
- Next.js Bundle Analyzer로 번들 분석 및 최적화
- React Server Components(RSC) 전환으로 클라이언트 번들 경량화
- Dynamic Import를 활용한 코드 스플리팅
- JavaScript 번들 크기 24% 감소
- 초기 로딩 시간 45% 단축
- FCP(First Contentful Paint) 1.2초 개선
인가 로직이 클라이언트 측에서만 수행되면서,
보호된 페이지 접근 시 UI가 잠깐 렌더링된 뒤 인증 실패로 /login 리다이렉트가 발생해
페이지가 '깜빡이는' 현상이 있었습니다.
보호된 페이지 접근 시 불필요한 깜빡임을 제거하고,
사용자 경험을 매끄럽게 개선해야 했습니다.
- Next.js 미들웨어를 활용해 엣지 사이드 인증 검증
- 페이지 로드 전에 인증 상태를 사전 확인 후 접근/리다이렉트 처리
- 로그인 완료 시 보호된 페이지 접근에서 깜빡임 현상 제거
- 안정적이고 매끄러운 UX 제공
토큰 만료 시 여러 API가 동시에 각각 토큰 재발급을 요청하면서
서버 부하가 증가하는 문제가 있었습니다.
토큰 만료 상황에서 중복 재발급 요청을 방지하고,
사용자에게 재로그인 요구 없이 안정적인 API 요청 처리를 보장해야 했습니다.
- 첫 번째 API 요청만 토큰 재발급을 수행하도록 제한
- 동시에 요청된 다른 API들은 큐에 저장하여 대기
- 토큰 재발급이 완료되면 큐에 대기 중인 요청들을 일괄 재실행
- 불필요한 재발급 요청 제거
- 토큰 만료 시 재로그인 플로우 제거로 사용자 경험 개선
│README.md
│package.json
│pnpm-lock.yaml
│tsconfig.json
│next.config.ts
│eslint.config.mjs
│commitlint.config.js
│components.json
│postcss.config.mjs
│lighthouserc.js
│Dockerfile
├─🗃️public
├─🗃️lib
│ └─📁(utils 등)
└─🗃️src
├─🗂️app
│ ├─📁_providers
│ ├─📁(tabs)
│ │ ├─📁chatbot
│ │ ├─📁groups
│ │ ├─📁my-nemo
│ │ └─📁my-profile
│ ├─📁api
│ │ ├─📁healthcheck
│ │ └─📁v2
│ │ └─📁groups
│ │ └─📁recommendations
│ │ ├─📁questions
│ │ └─📁session
│ ├─📁groups
│ │ ├─📁[groupId]
│ │ │ └─📁schedule
│ │ │ ├─📁[scheduleId]
│ │ │ └─📁create
│ │ ├─📁create
│ │ └─📁search
│ └─📁login
│
├─🗂️entities
│ ├─📁chatbot
│ ├─📁group
│ ├─📁profile
│ └─📁schedule
│
├─🗂️features
│ ├─📁auth
│ ├─📁category
│ │ └─📁category-filter
│ ├─📁create-group
│ ├─📁create-group-info
│ ├─📁create-schedule
│ ├─📁group
│ │ ├─📁delete-group
│ │ ├─📁leave-group
│ │ ├─📁manage-group
│ │ ├─📁manage-members
│ │ └─📁update-group-image
│ ├─📁join-group
│ ├─📁navigate-back
│ ├─📁profile
│ │ ├─📁update-nickname
│ │ └─📁update-profile-image
│ ├─📁respond-schedule
│ ├─📁schedule
│ └─📁search
│ └─📁search-groups
│
├─🗂️shared
│ ├─📁assets
│ │ ├─📁fonts
│ │ └─📁images
│ ├─📁config
│ │ └─📁sentry
│ ├─📁constants
│ ├─📁lib
│ ├─📁store
│ ├─📁styles
│ └─📁ui
│
└─🗂️widgets
├─📁bottom-navigation
├─📁group-details
├─📁group-list
├─📁my-group-list
├─📁my-schedule-list
└─📁schedule-list
gir-flow 전략을 적용하되, release 브랜치는 사용하지 않는다.
케밥케이스를 따른다. (kebab-case)
1. main: 운영 베포용
2. develop: 개발 통합용
3. feature/이슈번호-기능명: 새로운 기능 개발
4. fix/이슈번호-버그명: 개발 중 발견한 버그 수정
5. hotfix/이슈번호-긴급수정명: 운영 중 긴급 수정
6. refactor/이슈번호-기능명: 기능에 대한 리팩토링
> e.g. `feature/3-kebab-case`
> 이외의 브랜치는 팀원들과 상의를 통해 생성한다.
> Feat : 내용 (#이슈번호)
> e.g. Feat: 아무말 대잔치입니다 (#5)
- `Feat` : 새로운 기능 추가
- `Design` : CSS 등 사용자 UI 변경
- `Refactor` : 코드 리팩토링
- `Fix` : 버그 수정
- `Comment` : 주석 추가 및 변경만 하는 경우
- `Remove` : 파일, 폴더 삭제 작업만 하는 경우
- `Rename` : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 하는 경우
- `Setting` : 프로젝트 세팅
- `Docs` : 문서 수정
- `Chore`: 그 이외의 잡일/ 버전 코드 수정, 패키지 구조 변경, 파일 이동, 파일이름 변경
- 2주 단위 스프린트 진행
- 마일스톤 단위 버전 업데이트 진행
- 칸반보드 티켓 기반 태스크 매니징
- 매일 오전 09:10 ~ 09:30 데일리 스크럼
- 매일 오후 17:50 ~ 18:00 데일리 회고 (작업 병목 상황에 짧게 대해 공유합니다)
- 디스코드를 통한 비동기 커뮤니케이션
- 동기 커뮤니케이션 필요 시, 회의실과 타운홀 활용
| 문서(링크) |
|---|
| 유저플로우차트 |
| 칸반보드 |
| 프로젝트 Wiki |
| 린캔버스 |
| IA |
| 화면설계서 |
| ERD |
| API 명세서 |