미리보기

사내 PMS

• Next 서버를 활용한 BFF 구현

  • 백엔드 변경에도 UI 코드가 영향받지 않는 유연한 개발 환경 구성

• BFF 도입으로 인한 코드 분량의 증가를 해결하기 위해 api 통신 및 에러처리 공통 모듈화

  • 코드의 재사용성을 높이고 유지보수를 용이

• 간트 차트 기반의 Task 관리 툴 구현

  • 일정 생성, 변경, 삭제 등을 쉽게 트레킹하고 기간별로 쉽게 파악 가능한 UI 및 로직 구현

• HOC를 활용한 접근제한을 통한 로그인 계정별 권한 제한 핸들링

• 로딩 속도 개선을 위한 AWS lamda 이미지 리사이징 처리

• GPS 기반 출석 서비스 구현을 통한 인테리어 시공 현장 인원 관리

• 요구사항 구체화를 위한 순서도 작성 및 userCase 분석

• 회의 시 인테리어팀 요구사항 정리 및 개발팀에서 구현해야 할 요구사항 분석 주도

회사소개 페이지

• 원페이지 스크롤 방식의 회사소개 페이지 구현

• 반응형을 고려한 디자인 작업

• 타이핑, 스크롤 등 매끄러운 UX를 위한 애니메이션 작업

짠견적

• UI/UX를 고려한 짠견적 페이지 리뉴얼

  • UI 요소 간소화, 퍼널 개선 등을 통한 리뉴얼

• 짠견적 페이지 회사 메인 컬러에 맞는 재디자인

  • 메인 컬러 일관성 부족을 개선 및 사용하기 쉬운 디자인

1. 결제 퍼널 개선 및 멤버쉽 결제율 증대:

   • 과정: 결제 퍼널에서 유저 이탈 지점을 분석하여, 보험 약관 및 이용 동의 절차를 개선.

   • 문제: 유저들이 결제 과정에서 보험 약관에 동의하지 않아 결제 전 이탈하는 문제가 발생.

   • 해결: ‘모두 동의’ 옵션을 제공하여 절차를 간소화하고 유저의 동선 흐름을 최적화함으로써 결제 완료율을 높임.

   • 기여: 결제 전환율을 크게 개선하고, 퍼널 최적화를 통한 유저 만족도 증대.

2. 코드 구조 및 상태 관리 최적화:

   • 과정: 기존 전역 store와 props 드릴링 문제를 해결하기 위해 코드 구조를 리팩토링.

   • 문제: props를 여러 단계에 걸쳐 전달하는 방식에서 변수명 변경 및 전역 상태 사용으로 인해 유지보수성이 저하됨.

   • 해결: 불필요한 전역 상태를 제거하고, 필요한 데이터는 필요한 시점에 API 콜을 통해 가져오도록 변경하여 데이터 신선도를 보장.

   • 기여: 코드의 가독성을 높이고 유지보수성을 크게 개선하며, 데이터 처리 속도 향상.

3. 동물 경매장 및 협회를 위한 관리자 서비스 구축:

   • 과정: 동물 경매와 관련된 데이터를 효율적으로 관리할 수 있는 관리자 서비스 구축.

   • 기여: 관리자가 경매 데이터를 쉽게 관리하고 업데이트할 수 있도록 사용자 친화적인 인터페이스 제공.

4. 개발 환경 개선:

   • 과정: npm 환경에서 발생하는 유령 의존성을 해결하기 위해 Yarn Berry + PnP 도입.

   • 문제: 의존성 관리의 복잡성과 빌드 시간 지연 문제.

   • 해결: Yarn Berry와 PnP를 도입하여 불필요한 의존성을 제거하고, SWC로 빌드 속도를 개선.

   • 기여: 개발 환경의 안정성 확보 및 빌드 시간 단축.

5. 반응형 웹 및 UI 컴포넌트 구현:

   • 과정: 모바일 및 태블릿 사용자 경험을 최적화하기 위한 반응형 웹 대응.

   • 기여: 다양한 디바이스에서 사용자 경험을 개선하며, Mocking 레이어를 통해 변경에 유연한 UI 컴포넌트 구현.

1. 폼 데이터 관리 및 UX 최적화 (Next.js 14 App Router 기반):

   • 과정: React-hook-form을 사용하여 폼 데이터를 관리하고, soft navigation을 활용해 single-page 환경에서 폼 데이터 유지를 구현.

   • 문제: 폼 전환 시 데이터 손실과 유저 이탈률이 높아 유저 경험이 저하.

   • 해결: soft navigation으로 폼 데이터를 유지하고, Maze 툴을 사용해 유저 이탈 지점을 분석한 후 UX를 개선. 이를 통해 명함 생성 프로세스를 단축하고, 유저 이탈률을 70% 감소.

   • 기여: 유저 인터랙션과 편의성을 대폭 개선하며, 유저의 직관성을 위한 생성 예시 페이지를 추가하여 폼 작성 과정을 간소화.

2. 이미지 저장 및 라우팅 최적화:

   • 과정: S3 이미지 저장을 UUID로 관리하고, UUID 기반의 라우팅을 통해 기존 입력 정보를 바탕으로 Optimistic UI 구현.

   • 문제: 페이지 전환 시 느린 렌더링 및 비동기 데이터 불러오기 지연 문제.

   • 해결: Optimistic UI를 사용하여 빠른 랜더링을 구현하고, 다른 경로를 통한 접속 시 UUID 기반으로 데이터를 받아오는 방식을 통해 유연한 데이터 처리와 렌더링 방식을 분화.

   • 기여: 페이지 전환 속도를 개선하고 유저 경험을 향상시키며, 이미지 및 데이터를 효율적으로 관리.

3. 디자인 시스템 구축 및 UI 대응:

   • 과정: 디자인의 일관성을 유지하고, 메인 컬러 및 버튼 UI 변경 등의 요구에 신속하게 대응하기 위해 디자인 시스템을 구축.

   • 문제: UI 요소 변경 시 일관성 유지와 변경 작업의 비효율성 문제.

   • 해결: 디자인 시스템을 도입해 통일감 있는 디자인과 빠른 변경 대응이 가능하도록 구조화. UI/UX 요구사항 변화에 유연하게 대응.

   • 기여: 메인 컬러, 버튼 UI 등 디자인 변경 요청에 즉각 대응하여 개발 속도를 향상시킴.