리핏은 면접 경험을 체계적으로 관리할 수 있도록 도와주는 면접 복기 서비스에요.
리핏 팀에서 22명의 취준생을 대상으로 유저 인터뷰를 시행한 결과, 면접 복기를 제대로 하지 못해서 면접 경험이 유의미한 자산으로 남지 못하는 문제를 발견했어요. 이를 해결하기 위해 면접 복기를 세 단계로 구조화하고, 각 단계에 맞는 핵심기능을 설계했어요.
- 형식 고민 없이 글이나 음성으로 편하게 면접 내용을 입력하면, AI가 질문과 답변을 자동으로 분류해줘요.
- 면접 질문이 자소서의 어느 부분에서 나왔는지 하이라이트로 표시해 서로 묶을 수 있어요.
- 대면 면접 직후에도 편하게 기록할 수 있게 모바일 웹을 지원해요.
- 자동 분류된 질답에 개별 회고를 남길 수 있어요.
- AI가 내 답변을 STAR 기법으로 분석해, 부족한 점이 무엇인지 알려줘요.
- 한 면접에 대한 전체적인 회고를 할 수 있게 KPT 기법을 지원해요.
- 내 면접 성과를 알기 쉽게 대시보드에서 차트와 그래프로 보여줘요.
- 내 기록뿐만 아니라, 다른 유저들이 공유한 면접 질문도 확인할 수 있어요.
Refit의 사용 방법은 위키를 참고하시면 더 알차게 이용하실 수 있어요. 😀
| 권찬 | 송영범 | 이장안 | 홍지운 | 황주희 |
|---|---|---|---|---|
 |
||||
| BE | BE | BE | Lead / FE | FE |
리핏 팀은 Jira를 기반으로 업무를 관리하고, 1주 단위로 스프린트를 운영해요.
| 스프린트 기간 | 스프린트 목표 | 백로그 |
|---|---|---|
| 1주차 (01/19 ~ 01/25) |
- [공통] Git 컨벤션 설정 및 프로젝트 초기 환경 구축 - [공통] 디자인 핸드오프 기반 기획 최종 검토 및 싱크 |
Refit 1주차 백로그 |
| 2주차 (01/26 ~ 02/01) |
- [공통] Jira Automation을 활용한 프로젝트 워크플로우 설계 및 구현 - [FE] 공통 UI 컴포넌트 설계 및 프로젝트 라우팅 아키텍처 구축 - [FE] Fetch API 기반 HTTP 클라이언트 설계 및 구현 - [BE] ERD 및 API 명세 설계 - [BE] 서버 공통 로직 개발 |
Refit 2주차 백로그 |
| 3주차 (02/02 ~ 02/08) |
- [FE] 서비스 모든 페이지 정적 UI 구현 - [FE] n8n과 Orval을 활용한 자연어 -> OAS -> React Hooks 플로우 개발 - [BE] 공통 CRUD API 개발 - [BE] OAuth2 구글 로그인 개발 |
Refit 3주차 백로그 |
| 4주차 (02/09 ~ 02/15) |
- [FE] 서비스 모든 페이지 Mock API 연동 - [BE] 통합 테스트 코드 작성 및 API 로직 고도화 |
Refit 4주차 백로그 |
| 5주차 (02/16 ~ 02/22) |
- [FE] 서비스 모든 페이지 API 연동 - [FE] Claude Code를 활용한 웹 접근성 개선 및 E2E 테스팅 - [BE] 질문 임베딩 벡터 생성 및 카테고리 분류 배치 로직 개발 - [BE] PDF 업로드 및 하이라이팅 등록 로직 고도화 |
Refit 5주차 백로그 |
소프티어 과정 이후 어떤 도메인, 어떤 조직에 가더라도 공통적으로 적용 가능한 역량을 기른다.
- 1주차 스프린트 동안 개발자들끼리 기획·디자인 회의를 진행해 정책을 수립했고, 주요 유저 플로우를 점검하였습니다.
- 어색한 UI/UX 는 유사 서비스들을 레퍼런스 삼아 개선했고, History 객체 관리와 권한 없는 페이지 처리 같은 디테일한 유저 플로우도 다듬었습니다.
- Claude Code의
/web-design-guidelines스킬을 활용해 접근성을 개선했습니다.
- 프론트 팀원이 3명에서 2명으로 줄어든 상황에서, Claude Code를 실질적인 팀원으로 도입해 인력 공백을 보완했습니다.
- Markdown과 Skills를 기반으로 AI Agent에 친화적인 코드베이스와 워크플로우를 설계했습니다.
- Jira Automation을 이용하여 Jira -> GitHub 단방향 워크플로우를 구축했습니다.
- 팀원 간 편안한 분위기는 유지하되, 반말은 지양하고 ~님 호칭을 일관되게 사용했습니다.
- Slack Workflow를 이용해
#request채널을 만들었고, 처리 과정을 추적할 수 있게 표준화하였습니다. - 프로젝트 전역에 영향을 미치는 작업은 페어 프로그래밍으로 진행했습니다.
| 분류 | 기술 스택 |
|---|---|
|
언어 및 프레임워크 |
|
|
라이브러리 |
|
|
스타일 |
|
|
빌드 툴 |
|
|
배포 |
|
frontend/
├── src/
│ ├── routes/
│ │ ├── index.tsx # createBrowserRouter 설정
│ │ ├── routes.ts # ROUTES 경로 상수
│ │ └── middleware/ # 인증, 모바일 감지 미들웨어
│ │
│ ├── pages/ # 라우터 진입점
│ │ ├── _index/ # 폴더 단위의 라우트 엔트리 (라우트 구조와 1:1 대응)
│ │ └── ...
│ │
│ ├── features/ # 화면/도메인 기능 구현 계층 (라우트 구조와 1:1 대응)
│ │ ├── _common/ # 전역 공통 모듈 (여러 도메인에서 재사용)
│ │ ├── dashboard/ # dashboard 도메인
│ │ │ ├── _common/ # dashboard 내 여러 화면에서 공유하는 모듈
│ │ │ ├── _index/ # dashboard 기본 화면
│ │ │ │ ├── components/ # _index 화면 전용 UI 컴포넌트
│ │ │ │ ├── constants/ # _index 화면 전용 상수
│ │ │ │ ├── contexts/ # _index 화면 전용 Context/Provider
│ │ │ │ └── hooks/ # _index 화면 전용 커스텀 훅
│ │ └── ...
│ │
│ ├── apis/ # API client 및 요청 로직
│ │ ├── generated/ # Orval이 생성한 React Hooks
│ │ └── custom-fetch.ts # Custom Fetcher
│ ├── constants/ # 공통 상수
│ ├── layouts/ # 공통 레이아웃
│ ├── routes/ # 라우팅 정의/미들웨어
│ ├── styles/ # 전역 스타일
│ ├── types/ # 공통 타입
│ └── ui/ # 재사용 UI 컴포넌트/에셋
│
└── api-docs.json # OpenAPI Specification (OAS)
- n8n 워크플로우(Notion → Vertex Chat Model → GitHub)를 구성해, 자연어 API 명세를 자동으로 OAS(OpenAPI) 파일로 변환·반영하는 파이프라인을 만들었습니다.
- 프론트엔드는 Orval을 도입해 OAS로부터 타입(d.ts), API 호출 함수, React Query Hook, MSW Handler를 자동 생성하고, pnpm orval 한 번으로 스펙-코드를 동기화했습니다.
- 이 구조로 백엔드 미완성 단계에서는 MSW로 병행 개발하고, API 준비 후에는 Handler 제거만으로 점진 전환했으며, 이후에는 springdoc-openapi 기반 OAS 추출로 운영 루프를 이어갔습니다. 더 자세한 내용은 해당 아티클에서 보실 수 있습니다.
- CLAUDE.md는 가볍게 유지하고, 세부 규칙은 .claude/**/*.md 로 분리해 필요한 Context만 선택적으로 가져오도록 설계했습니다.
- 반복 작업들은 Skills로 모듈화해 AI Agent의 실행 품질과 일관성을 높였습니다.
- SPEC.md 작성 -> Plan Mode 기반 구현 -> 검증 Skils 실행 -> 문서 정리 Skills 실행으로 이어지는 Workflow를 설계해, AI Agent 친화적인 Codebase를 만들었습니다.
rollup-plugin-visualizer를 통해pdfjs-dist가 초기 번들에서 큰 비중을 차지하고 있음을 확인React.lazy()를 이용해 Route-based Lazy Loading 적용- Rollup의
manualChunks옵션을 이용해 Vendor Splitting 적용 - [홍지운, 황주희] 코드 스플리팅을 통한 초기 로딩 속도 최적화 에서 더 자세한 내용을 확인할 수 있어요.
| Before | After |
|---|---|
  |
  |
| 초기 번들: 1,193.55 kB | 초기 번들: 716.91 kB |
| 초기 번들 gzip: 374.04 kB | 초기 번들 gzip: 234.64 kB |
| 총 번들: 1,193.55 kB | 총 번들: 1,196.88 kB |
- /web-design-guidelines Skills를 활용해 접근성 체크리스트와 SEO 기본 원칙을 설계 단계에서 반영
| Before | After |
|---|---|
 |
 |
/web-design-guidelines Skills 접근성 체크리스트 결과 예시
 |
 |
|---|---|
 |
 |
- /agent-browser Skills를 활용해 사전 정의한 자연어 시나리오를 기반으로 E2E 테스트를 진행
1. 하이라이트 테스트
default.mp4
2. 면접 생성 및 복기 테스트
default.mp4
| 분류 | 기술 스택 |
|---|---|
|
언어 및 프레임워크 |
|
|
의존성 관리 및 빌드 |
|
|
배포 |
|
|
데이터베이스 및 캐시 |
|
|
도구 및 기타 |
|
ERD (링크)
