Payment Gateway
마케팅 사이트, 인증, 가맹점 대시보드를 포괄하며 React로 엔드투엔드 구축된 암호화폐 결제 게이트웨이의 충실한 프런트엔드 재현 프로젝트입니다.
React 18
Vite
React Router 6
SCSS
Swiper
개요
이 프로젝트는 기업이 암호화폐 결제를 도입할 수 있도록 돕는 암호화폐 결제 게이트웨이인 Cryptomus의 프런트엔드 재현 프로젝트입니다. 서비스를 소개하는 마케팅 사이트, 로그인 및 회원가입 플로우, 인증 기반 가맹점 대시보드 등 세 가지 영역에 걸쳐 제품의 전체 인터페이스를 재구축했습니다. 실제 결제 처리가 아닌 UI 및 프런트엔드 동작을 구현한 UI 프로젝트이며, 단일 랜딩 페이지를 넘어 전체 제품 화면을 포괄합니다.
문제점
암호화폐 결제 게이트웨이는 겉보기보다 훨씬 더 방대한 제품입니다. 퍼블릭 영역에서는 기술적인 서비스를 알기 쉽게 설명하고 설득해야 하며, 가격 책정, 요금 체계, 지원 코인, 결제 처리 도구, 고객 후기(소셜 프루프) 등을 포괄해야 합니다. 반면 프라이빗 영역은 자체 내비게이션과 상태를 갖춘 실질적인 운영 대시보드여야 합니다. Cryptomus와 같은 플랫폼을 충실하게 재현하는 것은 진정한 프런트엔드 역량 평가였습니다. 수많은 개별 화면, 완전히 다른 두 개의 셸 구조, 전체에 걸친 일관된 테마 적용, 어디서나 매끄러운 반응형 동작이 요구되었기 때문입니다. 한두 페이지를 흉내 내는 데 그치지 않고 제품 전반을 정확하게 재구축하는 것이 목표였습니다.
내 역할 및 접근 방식
마케팅 페이지부터 대시보드에 이르기까지 프런트엔드 전체를 직접 개발했습니다. 구조적 핵심 결정은 이 애플리케이션을 퍼블릭 마케팅 경험과 인증 대시보드라는 두 개의 제품이 한 지붕 아래 있는 형태로 취급하고, 하부의 공통 요소를 공유하면서도 각 영역에 고유한 레이아웃 셸을 부여한 점이었습니다. 화면별로 스타일링을 구성하여 스타일시트 간의 간섭 없이 각 화면이 참조 디자인과 정확히 일치하도록 했으며, 테마 설정과 대시보드 사이드바 같은 공유 상태는 React context로 끌어올려 애플리케이션 전반에서 일관되게 동작하도록 했습니다.
기술 스택
주요 기능
갤러리
도전 과제 및 해결 방안
가장 큰 과제는 방대한 범위를 일관되게 구축하는 것이었습니다. 이 제품은 마케팅 사이트와 실제 작동하는 대시보드를 모두 아우르며, 이는 서로 다른 크롬(UI 프레임)을 사용하는 두 개의 독립된 애플리케이션과 다름없습니다. 저는 퍼블릭 사이트용과 인증된 대시보드용으로 별도의 레이아웃 셸을 두고, React Router의 중첩 라우팅으로 결합하여 각 영역이 올바른 헤더, 푸터, 내비게이션을 유지하면서도 공통 컴포넌트를 공유하도록 설계했습니다.
여러 화면으로 구성된 대규모 UI의 유지보수성을 유지하는 것 역시 핵심 고려사항이었습니다. 하나의 방대한 스타일시트 대신 화면별로 SCSS를 분할하여 각 페이지가 레퍼런스 디자인과 정밀하게 일치하도록 스타일링했고, 테마나 사이드바와 같은 횡단 관심사 상태는 컨텍스트로 끌어올려 페이지마다 재구현할 필요 없이 전체 영역에서 동일하게 동작하도록 했습니다. 국제 전화번호 입력이나 캐러셀 같은 세부 요소는 검증된 라이브러리를 활용해 불필요한 재발명 없이 자연스러운 사용자 경험을 구현했습니다.
결과
그 결과 마케팅, 인증, 대시보드 전반에 걸쳐 완성도 높고 반응성이 뛰어난 암호화폐 결제 게이트웨이용 프런트엔드가 완성되었습니다. 본 재현 프로젝트는 단순화된 데모가 아닌 실제 복잡한 커머셜 인터페이스를 대상으로 멀티 셸 라우팅, 규모에 맞춘 화면별 스타일링, 공유 테마 설정, 컴포넌트 재사용 등 대규모 제품에서 가장 중요한 프런트엔드 역량을 보여줍니다.
유사한 프로덕트 문제가 있으신가요?
현재 프로덕트 현황, 필요한 결과, 직면한 제약 사항을 공유해 주세요. 이를 바탕으로 합리적인 첫 번째 마일스톤을 정의해 드립니다.
웹 애플리케이션 개발 서비스