개발자를 위한 AI 기반 문서 공동 작성 플랫폼 🖍️

📝 목차

• 1. 프로젝트 개요
• 2. 담당 역할
• 3. 프로젝트 화면 구성
• 4. 내가 사용한 기술 스택
• 5. 기술적 이슈와 해결 과정
• 6. 팀원

다음과 같은 목차로 구성되어 있습니다.

🚀 프로젝트 개요

💡 실시간 공동 문서 작성

• 문서를 최대 10명의 사용자가 실시간으로 분업하여 작성
• liveBlocks 라이브러리를 사용
• 연동된 Git 레포지토리에 실시간으로 Commit 및 Push 기능 제공

💡 AI 기반 문서초안 생성

• 레포지토리 파일명을 기반으로 문서 초안을 자동 생성하여 정확성을 향상
• 레포지토리 파일명 탐색 시 비동기 처리와 멀티쓰레드 기술을 사용하여 기존 대비 15배 빠른 속도 제공
• SSE방법으로 AI 답변 응답 속도 16배 향상

💡 문서 산출물 조회

• Elastic Search를 사용하여 LIKE문 대비 10배 빠른 검색 성능 제공.
• 구글 검색 엔진 및 SEO 최적화를 통해 검색 효율성을 강화.

💡 Github, GitLab 소셜로그인

• Github 및 GitLab 소셜 로그인 제공

👨‍💻 담당 역할

💡 AWS 환경에서 Docker와 Github Actions을 통한 CI/CD 파이프라인 구축

💡 SEO 최적화 및 구글 검색 결과 노출

• SSR(Server-Side-Rendering)
• 시멘틱 태그, 메타 태그를 사용하여 SEO 최적화

💡 WithMe(Main, Explore, Aboutus, Workspace, Login, find 등) 개발

💡 레거시 코드 개선

• Context API를 사용하여 Props Drilling을 줄이고 코드 구조를 단순화
• 이미지 업로드, 모달창, API 요청 메시지 처리를 담당하는 비즈니스 로직을 커스텀 훅으로 분리하여 유지보수성을 높임
• 공통 컴포넌트 등을 분리하여 Props로 실행 함수를 전달함으로서 모듈화와 재사용성 강화

💡 API 호출 성능 최적화

• React-Query를 사용하여 캐싱 처리

💡 CLS, LCP등 LightHouse 점수 향상

• Next/Image, Skeleton UI로 CLS 향상
• Lazy Loading, 이미지 및 폰트 최적화

💡 반응형 디자인

• 모든 디바이스에서 사용할 수 있는 반응형 웹

💡 예외 처리

🖥️ 화면 구성

Real-Time 협업 문서 작성과 간단한 AI 문서 생성
LiveBlocks 라이브러리를 활용한 Real-Time 협업 문서 작성

AI 기반 문서 초안 작성성
레포지토리 파일명을 기반으로 정확성 향상

Editor 화면 구성
LiveBlocks 라이브러리를 활용한 분업 제공

GitHub/GitLab OAuth로 로그인 및 Repository 연동
Github, GitLab API 사용

Elastic Search를 활용해 본문 내용 검색
Elastic Search로 LIKE 속도 개선

구글 검색 엔진 노출
SEO 최적화를 통한 구글 검색 엔진 노출

⚙ 내가 사용한 기술 스택

Backend

Frontend

Tools

🤔 기술적 이슈와 해결 과정

인프라 설계

• EC2 비용 문제로 인해, 프론트엔드, 백엔드, DB, Elasticsearch 서버를 하나의 EC2 인스턴스에 모두 설치.
• 하나의 서버에서 에러가 발생하더라도 다른 서비스에 영향을 미치지 않도록, 모든 서비스를 Docker 환경으로 분리하여 실행.
• GitHub Actions를 사용하여 CI/CD 파이프라인을 구축. 코드 바로보기

SEO 최적화

• generateMetadata를 활용한 동적 메타태그 코드 바로보기
• SSR를 활용한 서버 사이드 렌더링 코드 바로보기
• ReactMarkdown을 활용한 시멘틱 태그 코드 바로보기

레거시 코드 개선

• props drilling문제로 유지보수가 어려움. → Context API를 사용하여 코드의 가독성 개선 코드 바로보기
• 모달창이 닫힐 때 생기는 로직 중복 → 모달창이 닫힐 때 필요한 로직을 커스텀 훅으로 분리하여 재사용성 높임. 코드 바로보기
• 이미지 업로드 로직 중복 → 이미지 업로드 로직을 커스텀 훅으로 분리하여 재사용성 높임. 코드 바로보기
• API 호출 결과 메시지 핸들러 로직의 중복 문제 → 이를 커스텀 훅으로 분리하여 재사용성을 높임. 코드 바로보기
• 공통 컴포넌트를 분리하고, props를 통해 함수를 전달함으로써 재사용성을 높임. 코드 바로보기

API 성능 최적화

💡 상대적으로 오래 걸리는 GIHUB/GITLAB API를 효율적으로 사용하는 법

• 레포지토리 정보가 자주 변경되지 않는다고 판단 → 모든 레포지토리 정보를 가져오는 API 캐싱처리 코드 바로보기
• GitHub API로 레포지토리 정보를 처음 가져올 때 DB에 저장하고, 이후에는 DB에서 조회

LightHouse 점수 향상

💡 Next 잘 사용하기

• Next/Image는 많은 것을 제공한다. webp형식으로 이미지파일을 최적화하고, LazyLoading, 이미지 로드 되기전 크기를 설정할 수 있어 CLS(누적 레이아웃 이동)를 방지하고 페이지 속도 향상를 향상시킴. 코드 바로보기
• HTTP/1.1에서 HTTP/2.0으로 프로토콜 버전을 업그레이드하여 LCP(Largest Contentful Paint)를 개선
• 브라우저에서 직접 폰트를 가져오는 대신, next/font를 사용하여 폰트를 적용하고 최적화하여 렌더링 코드 바로보기
• 뷰포트에 보이는 용량이 큰 이미지를 preloading으로 처리하여 LCP를 개선 코드 바로보기
• Main 페이지, About 페이지 등과 같은 단순 조회 기능은 SSR(Server-Side Rendering)로 처리

반응형 디자인

• 뷰포트 크기에 맞춰서 Font 설정하기 → clamp사용 코드 바로보기
• 뷰포트 크기에 맞춰서 Grid 조정하기 → Grid사용 코드 바로보기
• 뷰포트 크기에 맞춰서 양쪽 여백 조정하기 → 미디어 쿼리 사용 코드 바로보기

예외 처리

💡 로그인 하지 않는 사용자가 edit 페이지 접속할 때

• middleware에서 예외 처리 코드 바로보기

💡 이미지 형식이 아닌 것을 업로드 할 때

• file Type 체크 코드 바로보기

사용자 경험(UX) 향상에 대한 고찰

💡 SSE 적용으로 GPT 응답 속도 개선

• 기존에 GPT 응답이 완료한 후 전체 문장을 전송 → SSE(Server-Sent Events)를 적용하여 부분적으로 실시간으로 응답을 전송

💡 Edit 페이지 입장 속도 개선

• 기존에는 LiveBlocks Room 생성을 위한 소켓 연결을 10개 완료한 후 입장 → 소켓 연결이 될 때마다 퍼센트가 증가하는 로딩 바 보여줌으로서 UX개선

💡 사용자가 수행한 작업에 대한 피드백을 제공하는 UI

• alert 창 → 잠시 나타났다가 사라지는 스낵바 UI UX 개선

💁‍♂️ 프로젝트 팀원

Frontend	Frontend	Frontend	Backend	Backend	Backend
홍범선	현경찬	이재영	이동규	황태건	신원철

📲 링크

:: 배포
:: withMe Link