README.md

시니어 네이버

개발 기간 : 2023.10.09 ~ 2023.11.17 ( 7weeks )
개발 인원 : 6명

프로젝트 소개

시니어가 디지털 시대에 쉽게 적응할 수 있도록 맞춤형 정보제공 웹 서비스

배포 링크

https://ggok2.duckdns.org

구현 기능 목록

1. 서비스 이용이 어려운 시니어를 위한 음성인식 챗봇

• 유저 친화적 서비스로 노인분들의 편의성을 위해 음성인식 형식으로 구현하였습니다
• 유저가 음성 데이터를 전달하면 이를 네이버 Stt api를 사용하여 텍스트로 변환을 합니다.
• 변환한 텍스트를 분석하고 특정 단어를 전달받으면 이에 맡는 병원,기상청 api 혹은 챗봇으로 텍스트를 전달합니다.
• 이후 각각의 api 혹은 챗봇에게 데이터를 받고 이를 알맞는 텍스트로 생성합니다.
• 생성한 텍스트는 네이버 TTS api에게 보내 음성데이터로 변환합니다.
• 변환한 음성데이터는 유저한테 보내주는 형식으로 Speech-To-Speech형식의 음성인식 AI 챗봇 서비스가 완성됩니다

2. 현재 내 위치를 기반으로 한 장소 검색 및 추천

3. 시니어 대상의 채용공고를 더 쉽게 찾기 위한 일자리 검색

4. 유저 맞춤 정보를 제공하는 큐레이션

5. 아랫 세대와의 간극을 좁혀줄 유행어 사전

사용한 기술

프론트엔드

TypeScript	React	Vite	Styled-component	Recoil
Jest	Git	react-Query	Eslint	Prettier

백엔드

Spring Security	JPA	spring boot	AWS RDS
mysql	Amazon S3	Git

팀원 소개

이름	강해빈	김지훈	여민수
역할	FRONT-END	FRONT-END	FRONT-END
담당	∙ 회원 관리 ∙ 소비 내역 분석	∙ 게임 ∙ 매칭 시스템	∙ 초기 환경 구축 ∙ 커스터마이징 ∙ 페이지 라우팅 ∙ 푸시알림

이름	강노아	권민우	김민석
역할	INFRA, BACK-END	INFRA,BACK-END	BACK-END
담당	∙ 서버 구축 ∙ 계좌 ∙ 랭킹 시스템	∙ 장소 검색 ∙ 일자리 검색 ∙ 유행어 사전 ∙ 백엔드 서버 배포	∙ 회원관리 ∙ 마이페이지 ∙ 음성인식 AI 챗봇

ERD

시니어 네이버, 어떻게 만들었나요?

1️⃣ 피그마를 사용하여 기획 및 디자인 하였습니다.

🎨 Figma 바로가기

시니어네이버의 디자인 시안과 디자인 가이드를 확인할 수 있습니다. 피그마에 아이디어를 시각적으로 표현하고, 일관된 디자인 가이드를 적용하였습니다. 사용자에게 직관적인 인터페이스를 제공하며, 사용자의 연령대에 맞는 UI/UX를 구현하려고 노력하였습니다.

2️⃣ 체계적인 개발 프로세스를 거쳤어요.

🔎 프로젝트 개발 과정 바로가기

각각의 기능 별 이슈를 생성하고, 해당 이슈로 브랜치를 생성해 작업을 수행했습니다. 어떤 내용이 변경되었는지 명확하게 전달하기 위해 각 커밋에는 상세한 메시지를 추가하였습니다.

코드의 일관성과 품질을 보장하기 위해, Eslint와 Prettier를 적용했습니다.

Jenkins로 지속적인 통합 및 개발(CI / CD)을 구현해 프로젝트의 안정성을 높였습니다.

각 기능 구현을 마치면 Gerrit을 통해 팀원들과 함께 코드의 품질을 개선하고 다양한 관점을 얻을 수 있도록 코드 리뷰를 진행했습니다.

3️⃣ 프로젝트 컨벤션을 정해서 진행했어요.

📃 프로젝트 컨벤션 바로가기

일관된 개발 컨벤션을 적용해, 프로젝트의 통일성을 높였습니다. 브랜치 이름과 커밋 메시지에 동일한 규칙을 적용해서 어떤 작업이 진행되었는지 추적하기 편하고 이해하기 쉽도록 하였습니다. 코드의 역할에 따라 디렉토리를 분리하였습니다. 재사용 가능한 공통 컴포넌트를 분리해 효율성을 높였습니다.

4️⃣ 개발 과정을 담았습니다.

✍️ 개발 과정 확인하기

시니어 네이버의 탄생과 발전을 볼 수 있어요.
사용성을 높이기 위한 리팩토링과 어려움을 겪었던 트러블 슈팅 과정을 생생하게 담았습니다.