안녕하세요! 라미팀의 Back-End Lead 김용민이에요! 
오늘은 결제 시나리오를 개선하며 UI/UX를 개선한 경험을 공유해보려고 해요!
왜 개선이 필요했을까요?
•
기존 코드를 보면서 가장 먼저 눈에 띈 것은 가독성이었어요. 한 파일에 모든 코드가 있다 보니 코드를 이해하고 수정하는 게 쉽지 않았거든요!
•
또 추가적으로 토스페이먼츠 심사 승인에 의해서
구독결제 추가에 의해 UI 의 변화가 필요했어요!
•
너무 복잡하기만 했던 결재 방법 선택!
어떻게 바뀌었을까요?
어떻게 개선했나요?
1. 코드 모듈화
select-payment-modal/
├── index.tsx
├── types.ts
├── utils.ts
...
Plain Text
복사
파일을 이렇게 나눈 이유는 간단해요!
•
index.tsx는 메인 진입점으로 사용
•
types.ts에서는 공통으로 사용되는 타입을 한 곳에서 관리
•
각 컴포넌트별로 파일을 분리해서 책임을 명확하게!
이렇게 하니까 코드가 훨씬 깔끔해졌어요!
2. UI 심플하게 개선
스텝 인디케이터를 심플하게 바꿨어요!
•
큰 원형 디자인 → 깔끔한 숫자 표시
•
불필요한 시각적 요소 제거
•
진행 상태는 색상으로만 구분
3. 자연스러운 사용자 경험
사용자 경험을 개선하기 위해 몇 가지 기능을 추가했어요:
•
다음 단계로 자동 스크롤 (setTimeout으로 DOM 업데이트 타이밍 맞추기)
•
단계별 버튼 표시 (이전 단계 완료해야 다음 버튼 표시)
•
3단계 프로세스 (결제방식 → 제품선택 → 결제진행)
특히 3단계로 나눈 이유는 결제방식과 제품 선택이
서로 독립적이어서 순차적으로 진행하는 게 자연스럽더라구요!
마무리
이번 개선을 통해 코드도 깔끔해지고, UI도 심플해졌어요!
무엇보다 사용자가 결제 과정을 더 쉽게 이해하고 진행할 수 있게 되었답니다
다음에는 더 나은 UX를 위해 어떤 개선이 필요할지 계속 고민해볼 예정이에요! 읽어주셔서 감사합니다!
#프론트엔드개발 #UI개선 #UX #리팩토링 #TypeScript