미리보기

니가가라 하와이는 여행을 꿈꾸는 사람(Dreamer)과 현지에서 그 꿈을 대신 실현해 줄 사람(Maker)을 연결하는 중개 플랫폼입니다. 사용자는 직접 여행을 떠나지 않고도 문화, 음식, 관광지 등을 대리 체험할 수 있습니다.

🔗 GitHub 바로가기

🌐 사이트: https://www.go-for-me.kro.kr/

이 프로젝트에서 프론트엔드 개발을 담당했으며, 성능 최적화와 AWS 배포도 진행했습니다.

주요 작업

• 회원가입/로그인 시스템 및 프로필 관리

• Maker 정보 수정 및 상세 페이지 구현

• 여행 요청 및 찜한 Maker 페이지

• 실시간 채팅(WebSocket), 알림 시스템

• 내비게이션 바, 사이드바, 유저 메뉴 구현

• AWS 배포 및 시스템 로그 관리

• 랜딩 페이지(지역 통계) 및 404 페이지 개발

새로운 기술 도입 및 선택 이유

• Zustand: Redux는 액션 타입, reducer, 스토어 설정 등의 보일러 플레이트 코드가 많아 유지보수가 어렵고, Recoil은 비동기 상태 관리에 강점이 있지만, 프로젝트에서는 React-Query로 캐싱을 처리하기 때문에 필요성이 낮았습니다. 따라서, 가볍고 사용이 간편한 Zustand를 선택했습니다.

• React-Query: 서버 상태 관리를 최적화하고 API 호출을 최소화할 수 있는 장점으로 선택하게 되었습니다. 수동으로 useEffect와 useState를 사용하여 상태를 관리할 수도 있지만, React-Query의 캐싱, 자동 리페칭, 비동기 데이터 동기화 기능을 사용하면 체계적이고 효율적인 관리가 가능합니다.

• Zod: 데이터 검증 및 타입 안정성을 강화하기 위해 사용하였습니다. TypeScript는 컴파일 단계에서만 타입을 검사하지만, API 응답 데이터나 폼 입력값이 실제로 올바른지 확인할 수 없습니다. Zod를 사용하면 런타임에서도 안전하게 데이터 검증이 가능합니다.

베타 테스트 진행 및 사용자 피드백 반영

베타 테스트를 통해 사용자 피드백을 수집하고 서비스 품질을 개선하였습니다. 이를 통해 다양한 환경에서 테스트하여 예상치 못한 에러를 조기에 발견하였습니다.

• 사용자의 피드백을 기반으로 UI/UX를 개선했습니다. 예를 들어, 랜딩페이지 통계 부분에서 모바일 버전에서는 마커 크기를 키워 직관적인 인터페이스를 제공하였습니다.

• 베타 테스트에서 발견된 API 요청 실패, 채팅 기능 오류 등을 수정하여 안정성을 개선했습니다.

동적 페이지 새로고침 문제 해결

AWS Amplify를 이용하여 정적 페이지를 배포했으나, Next.js의 동적 라우팅을 사용하는 페이지에서 새로고침 시 404 오류가 발생했습니다. Amplify가 기본적으로 정적 파일만 서빙하고, 동적 경로에 대한 리다이렉트 설정이 없었기 때문입니다.

• AWS Amplify의 Rewrite & Redirect 설정을 수정하여 동적 페이지도 정상적으로 처리되도록 설정하고, 모든 동적 경로(/maker-detail/:id, /dreamer/edit/:id 등)에 대해 200 상태 코드 반환하도록 구성하였습니다.

• 무조건 200을 반환하는 방식이 아니라, source 및 target 패턴을 적용해 올바른 동적 경로만 정상적으로 처리하도록 설정했습니다.

성능 최적화 및 로딩 속도 개선

초기 버전에서는 상태 관리와 API 호출 최적화가 부족하여 페이지 로딩 속도가 느렸습니다. 특히, 유저 정보와 Maker 리스트를 불러오는 과정에서 불필요한 API 호출이 발생할 수 있었고, 페이지 전환 시 데이터 요청이 반복되어 성능이 저하되는 문제가 있었습니다. 또한, 로그인 후 유저 정보를 전역 상태로 관리하지 않아 매번 로그인 정보를 서버에서 가져오는 비효율성이 있었습니다.

• React-Query를 적용하여 데이터 캐싱 및 서버 요청 최소화하였습니다.

• zustand를 활용하여 로그인 후 유저 정보를 전역 상태로 관리하였고, 회원가입 시 프로필과 함께 저장하여 서버 쪽으로 데이터를 함께 보냈습니다.

• API 호출 최적화로 서버 부하가 줄어들었고, 데이터 로딩 속도가 개발자 도구에서 Performance 탭 기반으로 측정된 결과 1.2초에서 0.8초로 개선되어, 사용자 경험을 크게 향상시켰습니다. 또한, 전역 상태 관리를 최적화하여 보다 안정적이고 효율적인 서비스 운영이 가능해졌습니다.

채팅 시스템 최적화 (실시간 웹소켓 도입)

원래 이미지 및 영상 파일을 포함한 실시간 채팅을 제공하려 했습니다. 그러나 채팅 시스템에서 파일 업로드와 실시간 메시지 처리가 동시에 진행될 경우, 성능 저하가 발생할 수 있었고, 서버 부하가 커지는 문제가 있었습니다.

• 기존의 Polling 방식에서 웹소켓을 사용한 실시간 통신으로 전환했으며, 이를 위해 Socket.IO를 도입했습니다. Socket.IO는 웹소켓을 기본으로 사용하지만, 안정적인 연결 유지와 다양한 환경에서 호환성을 제공하여 채팅 시스템의 실시간 반응성을 개선했습니다.

• 이미지 및 영상 파일을 업로드할 때, 서버의 안정성과 성능을 보장하기 위해 업로드 가능한 파일 크기를 10MB로 제한했습니다. 대용량 파일 전송으로 인한 시스템 부하를 예방하고, 보다 빠르고 안정적인 전송을 가능하게 했습니다. 또한, 채팅방에서 이미지 및 영상 파일을 미리보기로 보여주는 기능을 추가하여 사용자 편의성을 향상시켰습니다.

• 따라서 파일 크기 제한으로 서버 안정성 유지하였습니다.

AWS 배포 및 모니터링 시스템 구축

배포 후 실시간으로 성능 및 오류를 추적할 수 있는 시스템이 부족하여, 장애 발생 시 신속한 대응이 어려웠습니다.

• AWS Amplify를 활용해 CI/CD 자동 배포 시스템을 구축했고, Sentry로 실시간 오류를 감지하고 모니터링할 수 있도록 했습니다.

• Lighthouse 점수를 모든 페이지를 80점에서 90점 이상으로 개선하며 페이지 성능을 최적화했습니다.

• 따라서, 기존에는 수동 배포를 진행했으나, AWS Amplify 기반 CI/CD를 구축한 후 배포 시간이 약 10분으로 줄어 개발 효율성이 향상되었습니다.

• Sentry 도입 후 주요 오류 감지 시간이 평균 10분에서 2분으로 단축되었고, 장애 발생을 줄이고 안정성을 높였습니다.

피카픽포토는 포토 카드의 구매, 판매, 교환을 중개하는 마켓플레이스 애플리케이션입니다. 사용자들은 포토 카드를 판매하거나 교환 요청을 진행할 수 있으며, 다양한 필터와 정렬 기능을 통해 원하는 카드를 쉽게 찾을 수 있습니다. 관리자는 상점 내 카드 목록을 관리하고 교환 요청을 승인/거절하는 기능도 제공합니다.

🔗 GitHub 바로가기

프론트엔드 개발자로 참여하였으며, 주로 UI/UX 개선과 기능 구현을 담당했습니다. 또한, 상태 관리, 배포 자동화, 컴포넌트 설계 등을 통해 프로젝트의 전반적인 품질을 향상시켰습니다.

주요 작업

• 마켓플레이스 페이지 및 판매 등록 성공/실패 페이지

• 판매 등록, 포토 카드 수정/판매 취소, 교환 승인/거절, 로그인 필요 모달

• 모달 컴포넌트(로그인 필요, 구매하기, 교환 제시 취소/거절/승인, 판매 내리기)

• 공통 컴포넌트(드롭다운, 검색, 모달 레이아웃, 성공/실패 페이지)

여러 개의 필터를 관리하는 과정에서 발생한 문제 해결

처음에는 다양한 필터(등급, 장르, 설명 등)를 개별적으로 관리해야 했기 때문에 상태 업데이트 로직이 매우 복잡해졌습니다. 필터 상태 간의 의존성을 추적하는 데 어려움이 있었고, 이로 인해 에러가 발생하거나 필터링이 의도대로 동작하지 않는 문제가 있었습니다.

• 모든 필터 관련 상태를 하나의 객체로 통합하여 관리하였습니다. 이를 통해 상태 간의 의존성을 쉽게 추적할 수 있었고, 필터 변경 시 각 상태를 일관성 있게 업데이트할 수 있었습니다. 이러한 접근으로 필터 UI 및 사용자의 상호작용이 원활하게 작동하게 되었습니다.

• 이러한 개선으로 상태 관리가 단순화되었고, 필터링 기능이 더욱 안정적으로 동작했습니다. 또한, 최적화된 필터링 시스템 덕분에 페이지 로딩 속도를 1.5초에서 1초로 줄일 수 있었습니다.

Props Drilling 문제 해결

필터와 정렬 상태가 여러 컴포넌트에 걸쳐 깊게 전달되면서 코드의 가독성과 유지보수성이 떨어졌습니다. 예를 들어, PocketPlace → PocketPlaceFilter → Attribute 등 깊은 계층 구조에서 데이터가 전달되어 문제를 추적하기 어려웠습니다.

• 필터 상태를 단일 상태 객체로 관리하여 상위 컴포넌트에서 모든 필터 관련 로직을 처리하도록 했습니다. handleFilterChange 함수 하나로 필터 업데이트를 중앙 집중화하고, 이를 필요한 컴포넌트에 전달하는 방식으로 개선했습니다. 각 파일 간의 책임을 명확히 분리하여 가독성을 높였습니다.

• 따라서, 상태 관리가 중앙 집중화되어 데이터 흐름을 쉽게 파악할 수 있게 되었고, 코드의 유지보수성이 크게 향상되었습니다.

AWS 배포 및 성능 최적화

프로젝트의 배포와 운영에 있어 안정성이 부족하고, 애플리케이션의 성능 최적화가 필요했습니다. 특히, 트래픽이 급증하는 경우 서버의 부하가 증가하여 서비스가 중단되는 일이 있었습니다.

• AWS에서 Nginx를 리버스 프록시로 설정하고, SSL 인증서를 적용해 HTTPS를 지원했습니다. 또한, PM2를 활용해 서버가 여러 프로세스로 실행되도록 구성하여, 트래픽이 많아도 안정적으로 운영될 수 있도록 했습니다.

• 성능 최적화와 서버 안정성을 강화한 결과, 애플리케이션 성능이 30% 향상되었고, 트래픽 증가에도 서비스가 안정적으로 운영되었습니다. 또한, Blue-Green Deployment를 적용해 배포 중에도 서비스 다운타임을 최소화했습니다.

View My Startup는 스타트업 투자 플랫폼을 개발하는 것이었습니다. 개인 투자자들이 스타트업에 대한 정보를 확인하고, 모의 투자 및 투자 내역을 관리할 수 있는 웹 서비스를 제공하는 목표였으며, 주요 기능으로는 스타트업 정보 조회, 투자 내역 관리, 로그인 및 인증 시스템 구현 등이 있었습니다.

🔗 GitHub 바로가기

프론트엔드 개발자로 주로 활동했으며, React를 사용해 웹 인터페이스를 개발하고, 일부 백엔드 작업을 담당했습니다.

주요 작업

• 내비 헤더, 투자 목록 헤더, 드롭다운 컴포넌트 및 스타트업 정보 상세 페이지 개발, 투자 입력/수정/삭제 UI 구현

• 투자 관련 API 개발, JWT 기반 인증 및 사용자 정보 인증 구현

• 컴포넌트 구조 설계, 404 페이지 및 로딩 화면 제작

• S3 버킷을 이용한 정적 이미지 및 배포 URL 관리

API 호출 최적화 문제

개발 초기 단계에서 투자 목록을 불러오는 과정에서 중복 API 호출로 인해 성능 저하가 발생했습니다. 특히, 초기 페이지 로딩 시 여러 번의 불필요한 데이터 요청이 발생했는데, 이에 따라 페이지 로딩 시간이 길어지고 사용자 경험이 저하되었습니다.

• API 호출을 최적화하기 위해, debounce 기법을 적용하여 사용자가 페이지를 처음 로딩하거나 필터링할 때 불필요한 반복 호출을 줄였습니다. 또한, 한 번의 요청으로 필요한 데이터를 모두 불러오는 방식으로 API 로직을 개선했습니다.

• 페이지 로딩 속도를 30% 개선하고 서버 요청 수를 40% 줄여 성능을 최적화했습니다.

반응형 디자인 이슈

웹 애플리케이션을 다양한 디바이스에서 사용하기 위해 반응형 디자인이 필수적이었으나, 초기에는 모바일 및 태블릿에서 UI가 깨지는 현상이 있었습니다. 이는 다양한 해상도에 최적화된 디자인이 부족했기 때문입니다.

• Grid와 Flexbox를 사용하여, 화면 크기에 따라 레이아웃이 자동으로 조정되도록 했습니다. 이를 통해 모바일, 태블릿, pc 버전에서 모두 일관된 사용자 경험을 제공할 수 있도록 했습니다.

• 다양한 디바이스에서 더 편리한 사용자 경험을 기대할 수 있습니다.

React.js와 컴포넌트 기반 개발을 통해 UI 재사용성을 극대화했으며, 모듈화된 구조로 코드 중복을 줄였습니다.

투자 목록 헤더, 드롭다운 메뉴, 스타트업 정보 상세 페이지 등 총 10개 이상의 UI 컴포넌트를 개발했습니다. 이들 컴포넌트는 기능적으로 독립적이며, 여러 페이지에서 재사용이 가능하게 설계되었습니다. 또한, 백엔드와 협업하여 투자 관련 API 설계 및 구현에 참여했습니다. 특히, 투자 내역을 불러오는 API에서 실시간 데이터 통신을 처리하여, 스타트업 투자에 관한 정보를 정확하고 신속하게 사용자에게 전달할 수 있었습니다. JWT를 사용한 인증 시스템을 구현하여, 사용자 인증 및 권한 관리가 효율적이고 안전하게 이루어졌습니다. 프론트엔드를 S3 버킷을 통해 배포하고, 정적 자원(이미지, CSS, JS)을 효율적으로 관리했습니다. 배포 후 발생할 수 있는 오류나 버그를 빠르게 수정하여 서비스 안정성을 확보했습니다.

배포된 웹사이트의 트래픽이 증가함에 따라, 서버 부하를 줄이기 위한 최적화 작업을 진행하여 웹 페이지의 응답 속도를 35% 개선했습니다.

EATing DAY는 이화여자대학교 근처 맛집을 찾아보고, 해당 맛집에 대한 리뷰를 작성할 수 있는 웹 애플리케이션입니다. 사용자는 맛집의 평점을 별점으로 매기고, 해당 맛집에 대한 리뷰를 등록하거나 메뉴를 추가할 수 있습니다. 이 프로젝트는 HTML, CSS, JavaScript를 사용하여 기본적인 폼 기능을 구현하고, 사용자 인터페이스(UI)를 구성하는 데 중점을 두었습니다.

🔗 GitHub 바로가기

리뷰 등록 폼, 맛집 등록 폼, 메뉴 등록 폼을 담당했습니다. 각 폼은 사용자가 데이터를 입력할 수 있도록 기본적인 HTML 폼을 제공하고, 입력된 데이터를 JavaScript로 처리할 수 있도록 구현하였습니다.

별점 색깔 동적 변화

별점을 매기는 기능에서 사용자가 별을 클릭할 때마다 색상이 동적으로 변해야 하는 문제가 있었습니다. 처음 구현했을 때, 별을 클릭해도 색상이 제대로 변경되지 않거나, 클릭된 별 이후의 별들이 반응하지 않는 문제가 발생했습니다. 이 문제를 해결하기 위해, input과 label 요소를 활용하여 각 별을 독립적인 선택 항목으로 만들어, 클릭된 별부터 색상을 동적으로 변경하도록 수정했습니다. 또한, JavaScript를 사용해 클릭된 별을 기준으로 이전 별들의 색을 초기화하고, 클릭된 별부터 색상이 바뀌도록 구현했습니다. 이 방식으로 동적 색상 변경을 정상적으로 처리할 수 있었고, 사용자가 별점을 클릭할 때 직관적인 UI를 제공할 수 있었습니다. 이 과정에서 DOM 조작과 JavaScript로 동적인 스타일 변경에 대해 더 깊이 이해할 수 있었고, 사용자 경험을 개선하는 방법을 배울 수 있었습니다.

TrekBuddy는 자유 여행자를 위한 모바일 앱으로, 사용자가 관광지에 도착하면 자동으로 음성 가이드와 텍스트 요약을 제공하여, 여행의 피로를 덜고 더욱 유익한 경험을 할 수 있도록 돕습니다. 이 앱은 서울 지역 관광지를 중심으로 개발되었으며, 사용자가 여행 준비에 드는 부담을 줄이고 실시간으로 여행을 즐길 수 있도록 설계되었습니다.

🔗 GitHub 바로가기

TrekBuddy 프로젝트에서 모델 구축 및 앱 기능 개발을 담당하며 기술적 문제를 해결했습니다. 주로 가이드 스크립트를 생성하고 외부 텍스트-음성 변환 API인 Google TTS API를 사용하였으며, 안드로이드 앱의 기능 구현 및 최적화 작업을 맡았습니다.

가이드 스크립트 요약 모델 최적

가이드 스크립트를 생성하기 위해 웹에서 스크랩한 원문을 요약하는 과정에서, 모델이 요약 시 중요한 정보를 누락하거나 비효율적인 요약을 하는 문제가 발생했습니다.

• 한국어 Bart 모델을 텍스트 요약 용도로 fine-tuning 하여, 역사 및 문화재 관련 데이터를 학습시켰고, 모델의 추상적 요약 대신 중요한 정보를 강조하는 추출적 요약 기법을 사용하여 핵심 정보를 제공하도록 했습니다. 이를 통해 가이드의 정보 전달 품질을 개선했습니다.

• ROUGE Score에서 rouge-l recall 0.617, rouge-1 precision 0.58을 기록하며, 기존 대비 약 10% 향상된 요약 정확도를 달성했습니다. 이 과정에서 가이드의 정보 제공 품질을 높여 사용자들의 피로를 줄였습니다.

앱 UI/UX 개선

여행 중 UI가 직관적이지 않아 정보를 찾는 데 어려움이 있었습니다.

• UI/UX 개선을 위해, 푸른 계열의 색상 테마를 사용하여 여행의 분위기를 강조하고, UI를 간소화하여 사용자가 직관적으로 접근할 수 있도록 디자인을 개선했습니다. 또한, 반응형 디자인을 적용하여 다양한 해상도에서 문제가 없도록 했습니다.

• 사용자 리뷰에서 "UI가 더 직관적이고 사용하기 편하다"는 피드백을 받았으며, 앱의 사용성 평가에서 80% 이상의 사용자 만족도를 기록했습니다.

코스 및 관광지 검색 최적화

사용자가 원하는 관광지를 빠르게 찾기 어려운 문제가 있었습니다.

• 검색 필터링 기능을 추가하여 관광지 이름이나 해시태그로 원하는 정보를 빠르게 검색할 수 있도록 개선하였고, 스크랩 기능을 통해 사용자가 관심 있는 관광지를 저장하고 나중에 쉽게 찾아볼 수 있게 했습니다.

• 검색 시간이 약 15% 단축되었고, 사용자 검색 성공률이 90% 이상으로 개선되었습니다. 스크랩 기능의 사용 비율도 증가했습니다.

은상 수상 및 전체적인 기여

캡스톤 디자인 대회에서 은상을 수상하였습니다. 심사위원들은 이 앱이 기존의 여행 가이드 시스템을 혁신적으로 개선했으며, 사용자 경험과 편의성을 크게 향상시켰다고 평가했습니다.

앱을 실제로 사용한 사용자들은 '여행 준비가 더 편리해졌다'며 '자유롭게 가이드를 듣고 여행을 즐길 수 있었다'는 긍정적인 피드백을 주었습니다.

TrekBuddy 프로젝트에서 기술적 문제 해결, 가이드 생성 모델 최적화, 앱 UI/UX 개선 등을 담당하며 프로젝트의 성과를 이루어냈습니다. 은상 수상을 포함해 사용자들의 만족도를 높이고, 앱 다운로드 수가 증가하는 성과를 얻었습니다. TrekBuddy는 앞으로 전국적인 확장 가능성을 갖추었으며, 자유 여행 산업과 인공지능의 융합이 가져올 변화를 더욱 가속할 수 있는 기반을 마련했습니다.