WINCL

WINCL

📌 Summary

탄소배출권을 구매하기 위한 마켓 플레이스 페이지

• react를 활용하여 구현
• KAKAO, GOOGLE, PAYCO, FACEBOOK을 연동한 SNS 로그인 기능
• PAYCO, KCP, STRIPE을 연동한 결제시스템 개발
• AOS라이브러리와 IntersectionObserver api를 활용하여 뷰포트에 표시되는 요소들에 개별적인 애니메이션 효과 부여
• react-i18n 라이브러리를 활용하여 국,영문기능 구현
• AWS amplify를 통한 호스팅 설정 및 CI/CD 환경 구성

🔍 Meaning

페이지의 전체 기능과 퍼블리싱, 백오피스 개발을 담당했습니다.
이전까지는 간단한 기능이나 이벤트 페이지만 구현해왔지만, 처음으로 규모가 있는 프로젝트를 맡게 되었습니다.

💡 개요

기존 외주사에서 개발한 프로젝트를 인계받아 유지보수 및 기능 추가를 단독으로 진행했으며, 오픈 이후 스토어 전체를 전면 개편하여 UI/UX를 개선했습니다. 해당 프로젝트는 React와 SCSS를 사용해 구현했습니다.

SNS 로그인 기능 구현

사용자가 SNS 계정을 통해 빠르게 로그인할 수 있도록 KAKAO, GOOGLE, PAYCO, FACEBOOK을 통한 OAuth 기반의 SNS 로그인 기능을 구현했습니다. 단순히 외부 API를 직접 호출하는 방식이 아닌, 보안성과 관리 편의성을 고려해 회사의 백엔드 API를 활용한 통합 방식을 적용했습니다. 이를 통해 SNS 로그인 과정이 일관되게 관리되면서도 외부 API 변경에 유연하게 대응할 수 있도록 했습니다.

결제 모듈 연동

PAYCO, KCP, STRIPE을 통한 다양한 결제 수단을 연동해 사용자가 신용카드, 간편결제 등 다양한 결제 옵션을 선택할 수 있도록 구현했습니다. 이 과정에서도 개별 결제사의 API를 직접 호출하는 대신, 회사의 백엔드 API를 활용해 결제 요청과 응답을 처리함으로써 보안성과 유지보수성을 강화했습니다. 결제 시 오류 처리와 사용자 피드백 메시지를 명확히 전달해 결제 경험을 개선했습니다.

뷰포트 진입 시 애니메이션 효과 적용

사용자에게 시각적으로 자연스러운 인터페이스를 제공하기 위해 AOS(Animate On Scroll)를 사용해 fade-up 애니메이션 기능을 구현했습니다. 더불어 IntersectionObserver API를 활용해 사용자가 화면을 스크롤할 때 화면에 표시되는 영역마다 사이드바의 색상과 배경색이 자연스럽게 전환되도록 했습니다. 이를 통해 시각적 전환이 부드러워졌으며, 페이지 탐색 시 사용자의 집중도를 높일 수 있었습니다.

타 업체와의 협업을 통한 이벤트 기능 개발

타 업체와 협업하여 이벤트 기능을 추가로 개발했으며, 1주일 동안 저희 회사에 파견을 오셔서 함께 작업하며 실시간으로 소통하며 진행했습니다. 기능 구현에 필요한 파라미터와 데이터 구조를 상호 합의하여 개발하면서 원활한 정보 공유와 협력의 중요성을 경험했습니다. 이를 통해 서로의 요구사항을 명확히 이해하고 개발에 적용할 수 있었으며, 협업 과정에서 커뮤니케이션 능력과 문제 해결 능력을 더욱 발전시킬 수 있었습니다.

기술적 도전

• 페이지 전체를 개발하면서 애착이 많이 갔던 프로젝트였습니다.
• 특히, IntersectionObserver를 활용하여 뷰포트를 감시하고, 변화하는 요소에 따라 사이드바에 현재 표시되는 Section의 이름을 표시하고, Section별로 사이드바의 배경색을 변경하는 기능을 구현한 것이 인상적이었습니다.
• IntersectionObserver를 처음 접하면서 관련 개념을 스터디할 수 있었으며, 이를 통해 더욱 유동적인 UI를 제작할 수 있었습니다.