Mailplug Website Migration

어떤 프로젝트인가요?

정적 HTML 기반으로 운영되던 메일플러그 홈페이지를 React 기반 구조로 전환한 프로젝트입니다. 단순 마이그레이션에 그치지 않고 페이지 간 UI 패턴과 에러 메시지 기준을 정리해, 운영·유지보수 관점에서 구조를 재정비했습니다.

무엇을 해결해야 했나요?

기존 화면과 사용자 흐름은 그대로 유지하면서, 페이지마다 달랐던 구조와 기준을 하나로 맞춰야 했습니다.

• 페이지별로 UI 구조와 인터랙션 패턴이 달라 일관성이 부족했습니다.
• 공통 컴포넌트가 충분히 정리되어 있지 않아 중복 코드가 반복되었습니다.
• 에러 메시지 노출 기준과 문구 정책이 통일되어 있지 않아 사용자 경험 편차가 발생했습니다.

어떻게 접근했나요?

1. 반복되는 레이아웃과 UI 요소를 공통 컴포넌트 단위로 분리해 재사용 구조를 만들었습니다.
2. 페이지별로 달랐던 인터랙션과 에러 처리 방식을 공통 기준으로 정리했습니다.
3. 기존 화면의 사용자 흐름을 유지하면서 React 구조에 맞게 코드와 폴더 구조를 재정비했습니다.
4. 중복되는 스타일과 로직을 줄여 이후 수정 범위를 예측하기 쉬운 구조로 개선했습니다.

무엇이 달라졌나요?

정적 페이지 모음이던 홈페이지를, 기준이 있는 컴포넌트 구조로 바꿨습니다.

• 정적 HTML 중심 구조를 React 컴포넌트 기반으로 전환했습니다.
• 공통 UI와 에러 메시지 기준을 정리해 페이지 간 일관성을 높였습니다.
• 중복 코드와 반복 작업을 줄여 유지보수성과 확장성을 개선했습니다.