미리보기

여행 계획을 쉽고 편하게 작성하고 공유할 수 있는 웹 플랫폼입니다.

• 개발 인원: FE 5명, BE 2명, DE 1명

• 핵심이고 가장 복잡한 UI를 가진 여행 계획 일정 읽기/쓰기 기능을 포함하여 전체 작업량 30% 이상 담당

• Next.js App Router의 SSR/데이터 캐싱/이미지 최적화 기능, Tailwind CSS, React Query 등 프로젝트에 도입한 주요 기술을 미리 공부하고 해당 기술에 미숙한 팀원들에게 교육

• 서로 진행도를 체크하기 위해 빈번하게 질문하고 시간이 낭비되는 불편함을 해결하기 위해 Jira Automation을 도입하여 이슈 티켓 분류 자동화를 통해 각자 작업에 집중할 수 있는 환경 조성

• 백엔드 팀과 기획 단계에서 원하는 기능과 백엔드가 소화 가능한 작업량을 조율하여 구현 가능한 목표 정립

• 디자이너와 프론트엔드 팀 구성원 대부분이 협업 경험이 거의 없는 상황에서 개발자가 쉽게 UI를 구현할 수 있도록 디자이너와 함께 디자인 구조 설계

• 카드, 모달 등 주요 컴포넌트 UI/UX 디자인 참여

• 배포 페이지

• 깃허브

• 기술 문서

기존 Trablock 프로젝트를 백엔드 개발자 1명과 협력해 리팩토링 했습니다. 유지보수가 불편하고 불필요한 자원을 소모하는 코드 품질, 특정 상황에서 망가지거나 사용하기 불편한 UI/UX, 보안 조치가 적용되지 않은 쿠키 작업 등 이전 결과물에서 발생하는 문제를 정의하고 개선했습니다. 주요 문제 및 개선점은 아래와 같습니다.

1. 코드 품질 및 유지보수

   • API 데이터 캐싱이 적절히 활용되지 않아 서버에 동일한 데이터를 반복 요청하는 문제

     • App Router의 Fetch API 태그 기반 데이터 캐싱 기능을 적용, 얼마나 자주 갱신해야 하는 데이터인지 분류하여 1분~12시간까지 재검증 시간 설정

   • 한 눈에 알아볼 수 없어 헷갈리는 조건부 렌더링 로직

     • 렌더링 조건을 전달받아 조건부 렌더링을 처리하는 컴포넌트를 적용해 조건부 로직 가독성 증가

   • 동일한 코드 뭉치의 반복 작성으로 수정 시 불필요한 작업 소요 발생

     • 동일한 로직 및 구조를 가진 코드 뭉치를 공통화하여 수정 시 작업량 감소

2. UI/UX

   • SSR이 제대로 활용되지 않아 발생하는 일부 레이아웃 시프트 현상

     • SSR을 적용하여 레이아웃 시프트 최소화

   • 모바일 브라우저의 상하 제스처 동작 및 터치 동작 환경이 고려되지 않아 일부 버벅이거나 작동하지 않는 UI 조작

     • 새로 고침 동작과 겹치지 않도록 모바일에서 터치 상하 드래그 동작을 터치 동작으로 대체하고, 작동하지 않는 조작에 대해 터치 이벤트를 추가해 호환성 증가

   • 사용자 친화적이지 않은 에러 메시지

     • 백엔드 에러 코드에 대응하는 사용자 친화적인 에러 메시지 구성

   • 서버에 데이터 전송 시 로딩 상태 표시 UI의 부재로 사용자가 진행 상황을 알 수 없거나 중복으로 요청하는 문제

     • 서버에 데이터를 전송하고 응답을 기다리는 동안 데이터 제출 동작을 막고 로딩 UI를 추가하여 사용자가 진행 상태를 명확히 알 수 있도록 변경

   • 하드웨어 가속 픽셀 보간 문제로 픽셀 정합성이 떨어져 모달 UI 흐림 현상 발생

     • 하드웨어 가속을 사용하지 않도록 스타일을 수정하여 픽셀 정합성 문제 해결

   • 매우 긴 텍스트, 이미지 로드 실패 등 특정 상황에서 망가지는 UI 레이아웃

     • 개발 단계에서 의도치 않은 상황을 가정한 테스트를 통해 UI 개선

   • 기획 단계에서 예상한 동작과 달리 일부 사용하기 불편한 UI 배치

     • 모바일, 태블릿, 데스크탑 등 다양한 환경에서 테스트하며 사용자가 자연스럽게 사용할 수 있도록 UI 구성 및 위치 수정

3. 보안

   • 클라이언트 측에서의 쿠키 쓰기 및 보안 관련 조치 미비로 인한 잠재적 보안 위험

     • HttpOnly, SameSite, Secure 등 보안 설정 추가, HttpOnly 플래그를 사용하기 위해 쿠키 조작이 서버에서 작동하도록 변경하여 보안 개선

평균의 함정을 경고하는 컨퍼런스 브랜딩 작품 및 소통의 암호와 해독을 주제로 한 미디어 작품 전시

친환경과 재활용을 주제로 한 작품 전시 (2인 팀 참여)