- 배포 URL : https://port-0-withyou-2aat2cluv583d7.sel5.cloudtype.app
- 1인 개발 프로젝트
- 위듀는 면접을 앞둔 사용자들을 위한 면접 시뮬레이션 서비스 입니다.
- 뻔한 질문 리스트에 국한된 기존의 면접준비와 달리, 위듀는 AI가 다양한 질문을 제공하여 예상치 못한 상황까지 대비할 수 있습니다.
- 3가지 모드를 통해 사용자의 취향에 맞는 면접을 진행할 수 있습니다.
- Front-end : React, Typescript
- Back-end : Express
- Design : Figma
- 버전 및 이슈관리 : Github, Github Issues
- 서비스 배포 환경 : Cloudtype
- 사용자가 원하는 면접 모드를 선택할 수 있는 화면입니다.
- 모드를 선택하면 이름, 직무 입력란이 나타납니다.
- 컴포넌트가 PC환경에서는 좌우로, Mobile환경에서는 위아래로 펼쳐지는 애니메이션을 구현하였습니다.
| 홈 화면 - PC | 홈 화면 - Mobile |
|---|---|
- 사용자가 입력한 이름과 직무를 바탕으로 면접이 진행됩니다.
- 면접 중간에 모드를 변경해도 이름과 직무가 유지되도록 구현하였습니다.
- 면접화면 마운트 시 애니메이션을 구현하였습니다.
| 면접화면 - PC | 면접 화면 - Mobile |
|---|---|
- 사용자가 지원한 직무에 대한 기술질문을 끝없이 제공합니다.
| 연습면접 |
|---|
- 2개의 인성질문, 2개의 기술질문으로 진행되며 면접이 끝나고 면접에 대한 피드백과 합격 여부를 제공합니다.
| 실전면접 |
|---|
- 상당히 까다롭고 부정적인 면접관이 등장하여 다양한 상황에서의 면접을 대비할 수 있도록 합니다.
| 하드면접 |
|---|
- GitHub Milestone 에 개발에 필요한 큰 틀을 작성하였습니다.
- GitHub Issues를 통해 작은 구현목표를 정하고, 개발중 발생한 문제들과 진행사항을 comment에 기록하였습니다.
- 버그 방지를 위해 사용하였습니다.
- 사실 JS만으로도 충분히 구현할 수 있는 작은 프로젝트였지만 TS에 조금이나마 익숙해지기 위해서 도입하였습니다.
- Nesting을 이용하여 선택자 표기를 간단히 하는 것을 주 목적으로 사용하였습니다.
- ClassName 중복으로 인한 버그를 피하기 위해서 사용하였습니다.
- 컴포넌트별 CSS 파일이 분리되어 있어 전역 CSS를 사용할 때 보다 유지보수에 용이합니다.
- 애니메이션 실행 시 컴포넌트가 리렌더링 되지 않는다는 장점을 이용해 애니메이션 성능을 향상시키기 위해 사용하였습니다.
- 컴포넌트 마운트, 언마운트 시에 애니메이션을 구현하기 위해 사용하였습니다.
- 컴포넌트 내에서 해당 뷰포트가 PC환경인지 모바일환경인지 판단하기 위해 사용하였습니다.
-
기획부터 디자인, 개발까지 혼자 진행하며 웹 서비스 전반의 배포 과정을 경험했습니다.
-
컴포넌트 마운트/언마운트 시에 애니메이션을 적용해보며 컴포넌트 생명주 기에 대해깊게 공부할 수 있었습니다.
-
GPT가 최적의 답변을 하도록 유도하고 동시에 토큰 비용은 줄이기 위해 프롬프트 엔지니어링 과정에서 대화 내용을 번역하거나 요약해보는 등 다양한 시도를 해보며 언어 모델에 대한 지식을 얻었습니다.