🤵🏻 위듀 - AI 면접 서비스

• 배포 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

1. 연습면접

• 사용자가 지원한 직무에 대한 기술질문을 끝없이 제공합니다.

연습면접

2. 실전면접

• 2개의 인성질문, 2개의 기술질문으로 진행되며 면접이 끝나고 면접에 대한 피드백과 합격 여부를 제공합니다.

실전면접

3. 하드면접

• 상당히 까다롭고 부정적인 면접관이 등장하여 다양한 상황에서의 면접을 대비할 수 있도록 합니다.

하드면접

📜 이슈관리

• GitHub Milestone 에 개발에 필요한 큰 틀을 작성하였습니다.
• GitHub Issues를 통해 작은 구현목표를 정하고, 개발중 발생한 문제들과 진행사항을 comment에 기록하였습니다.

🔧 세부 기술스택과 채택한 이유

Typescript

• 버그 방지를 위해 사용하였습니다.
• 사실 JS만으로도 충분히 구현할 수 있는 작은 프로젝트였지만 TS에 조금이나마 익숙해지기 위해서 도입하였습니다.

SCSS

• Nesting을 이용하여 선택자 표기를 간단히 하는 것을 주 목적으로 사용하였습니다.

CSS-Module

• ClassName 중복으로 인한 버그를 피하기 위해서 사용하였습니다.
• 컴포넌트별 CSS 파일이 분리되어 있어 전역 CSS를 사용할 때 보다 유지보수에 용이합니다.

react-spring

• 애니메이션 실행 시 컴포넌트가 리렌더링 되지 않는다는 장점을 이용해 애니메이션 성능을 향상시키기 위해 사용하였습니다.

react-transition-group

• 컴포넌트 마운트, 언마운트 시에 애니메이션을 구현하기 위해 사용하였습니다.

react-responsive

• 컴포넌트 내에서 해당 뷰포트가 PC환경인지 모바일환경인지 판단하기 위해 사용하였습니다.

⚡ 개발일지 및 트러블 슈팅

• 개발일지 및 트러블 슈팅 모음

💭 프로젝트 주요 고려 사항, 알게 된 점

• 기획부터 디자인, 개발까지 혼자 진행하며 웹 서비스 전반의 배포 과정을 경험했습니다.

• 컴포넌트 마운트/언마운트 시에 애니메이션을 적용해보며 컴포넌트 생명주 기에 대해깊게 공부할 수 있었습니다.

• GPT가 최적의 답변을 하도록 유도하고 동시에 토큰 비용은 줄이기 위해 프롬프트 엔지니어링 과정에서 대화 내용을 번역하거나 요약해보는 등 다양한 시도를 해보며 언어 모델에 대한 지식을 얻었습니다.