🏦 우리은행 메인 페이지 리뉴얼 (2019 → 2026)

2019년 우리은행 메인 페이지를
2026년 기준의 UX·UI·개발 방식으로 리뉴얼한 프로젝트

MCP(Model Context Protocol)를 활용해
디자인–개발–리뷰 과정의 맥락을 자동으로 연결한 것이 핵심입니다.

---

📌 프로젝트 개요

본 프로젝트는
2019년에 제작된 우리은행 메인 페이지를 2026년 기준으로 전면 리뉴얼하는 것을 목표로 합니다.

단순한 시각적 개선이 아닌, MCP를 활용한 디자인–개발 협업 자동화 에 초점을 맞추어 진행되었습니다.

---

🕰️ Before — 2019 우리은행 메인 페이지

• 정적인 레이아웃 중심
• 디자인 스펙과 코드 간 수동 싱크
• 컴포넌트 재사용성 낮음
• 변경 시 커뮤니케이션 비용 큼

📷 2019 메인 페이지

---

🚀 After — 2026 우리은행 메인 페이지

• 컴포넌트 기반 UI 설계
• 디자인 시스템 반영
• 변경에 유연한 구조
• MCP 기반 자동화 흐름 도입

📷 2026 메인 페이지

---

🔧 리뉴얼 핵심 포인트

1️⃣ UI/UX 개선

• 금융 서비스 특성을 고려한 정보 위계 재정의
• 주요 액션 중심의 사용자 흐름 설계
• 불필요한 시각 요소 제거

---

2️⃣ 컴포넌트 중심 구조

• 버튼, 카드, 레이아웃 단위 컴포넌트화
• 유지보수성과 확장성 강화
• 디자인 시스템 기반 구현

---

2️⃣ MCP(Model Context Protocol) 활용

본 프로젝트에서는 MCP를 활용해
디자인 → 코드 → 리뷰 → 테스트까지의 맥락을 연결했습니다.

• Figma MCP

  • 디자인 스펙(색상, 레이아웃, 컴포넌트 구조) 자동 추출
  • 디자인 변경 사항을 코드에 빠르게 반영

• Storybook MCP

  • 컴포넌트 props 및 사용 사례 자동 탐색
  • 레거시 컴포넌트와 신규 컴포넌트 간 중복·불일치 감지
  • 디자인 스펙과 컴포넌트 구현 상태 비교

• GitHub MCP

  • PR 변경 사항 분석
  • UI 코드와 디자인 스펙 간 불일치 자동 감지
  • 코드 리뷰 자동화 지원

• Playwright MCP

  • 자연어 기반 UI 테스트 실행
  • 버튼 클릭, API 호출, 응답 스키마 검증

• Slack MCP

  • PR·컴포넌트 관련 담당자 자동 추적
  • 변경 맥락을 포함한 메시지 요약 및 응답
  • 불필요한 커뮤니케이션 비용 감소

---

🔄 MCP 활용 시나리오

본 프로젝트에서는 MCP(Model Context Protocol)를 활용해 디자인 → 구현 → 리뷰 → 테스트까지의 전 과정을 시나리오 기반으로 자동화했습니다.

---

Scenario 1. 디자인 → 코드 자동화

개요

디자이너가 만든 Figma 시안을 기반으로 UI 컴포넌트를 빠르고 정확하게 구현하는 시나리오입니다.

기존 방식의 문제

• Figma 개발 환경을 반복적으로 오가며 수작업 확인
• 색상, 간격, 레이아웃 오차 발생 가능
• 디자인 변경 시 재작업 비용 큼

MCP 활용 방식

• Figma MCP를 통해 디자인 스펙 자동 추출
• 색상, 레이아웃, 컴포넌트 구조를 AI가 직접 해석
• 추출된 정보를 바탕으로 코드 자동 생성

효과

• 구현 시간 대폭 단축 (수 분 → 1분 이내)
• 디자인과 코드의 완전한 동기화
• 시각적 불일치 문제 최소화

---

Scenario 2. Button Props 중복 탐지 및 히스토리 추적

개요

레거시 UI와 신규 UI 사이에서 기능은 같지만 이름이 다른 props 문제를 해결하는 시나리오입니다.

기존 방식의 문제

• props 중복 여부를 사람이 직접 확인해야 함
• 레거시 코드의 맥락을 알기 어려움
• 담당자 파악에 커뮤니케이션 비용 발생

MCP 활용 방식

• Storybook MCP로 버튼 컴포넌트 props 전체 탐색
• 기능은 같고 이름만 다른 props 자동 식별
• GitHub MCP로 해당 컴포넌트 작성자 및 히스토리 분석
• Slack MCP로 담당자 변경 여부 확인

효과

• props 설계 일관성 확보
• 레거시 코드의 의도와 맥락 빠르게 파악
• 불필요한 커뮤니케이션 제거

---

Scenario 3. 휴가 복귀 후 PR & UI 변경 사항 파악

개요

휴가 복귀 후 쌓인 PR과 UI 변경 사항을 빠르게 파악해야 하는 상황을 가정한 시나리오입니다.

기존 방식의 문제

• PR 하나하나 직접 열어 확인
• 디자인 변경 여부를 눈으로 비교해야 함
• 리뷰에 많은 시간 소요

MCP 활용 방식

• GitHub MCP로 PR 단위 변경 내용 요약
• UI 관련 코드 흐름 자동 정리
• Figma MCP로 추출한 디자인 스펙과 자동 비교
• 불일치 지점에 대한 코드 리뷰 코멘트 자동 생성

효과

• 리뷰 시간 대폭 감소
• 디자인 불일치 빠른 탐지
• 휴가 복귀 직후에도 빠른 컨텍스트 복원

---

Scenario 4. 요구 → 테스트 자동화

개요

UI 변경 이후 발생한 오류의 원인을 테스트를 통해 빠르게 추적하는 시나리오입니다.

기존 방식의 문제

• 프론트엔드/백엔드 중 원인 파악이 어려움
• 수동 테스트 및 로그 확인 필요
• 문제 원인 분석에 시간 소요

MCP 활용 방식

• Playwright MCP로 UI 테스트 시나리오 자동 실행
• 버튼 클릭 → API 호출 → 응답 검증까지 자동화
• API payload 및 스키마 불일치 여부 검사

효과

• 오류 원인 빠른 식별 (프론트엔드 vs 백엔드)
• 테스트 신뢰성 향상
• 디버깅 비용 절감

---

정리

본 프로젝트는 MCP를 활용해 디자인, 코드, 히스토리, 테스트를 하나의 Context로 연결했습니다.

이를 통해

• UI 구현 속도를 단축하고
• 코드 리뷰의 품질을 향상시키며
• 불필요한 커뮤니케이션 비용을 효과적으로 줄일 수 있었습니다.

---

⚙️ 기술 스택

• React
• JavaScript
• Vite
• Tailwind CSS

📁 폴더 구조

📦src
 ┣ 📂assets       // 이미지, 아이콘 등 정적 파일들을 보관합니다.
 ┣ 📂components   // 재사용 가능한 공통 UI 컴포넌트 (Button, Header 등)를 관리합니다.
 ┃ ┣ 📂icons
 ┣ 📂data         // 메인 페이지 UI(GNB, 슬라이더, 추천상품, 푸터 등)를 구성하는 정적 데이터 패키지
 ┣ 📜App.jsx      // 애플리케이션의 최상위 컴포넌트입니다.
 ┗ 📜main.jsx     // 애플리케이션의 진입점(Entry Point)입니다.

▶️ 실행 방법

npm install
npm run dev

npm run dev로 실행 가능하며,
레거시 구현은 main, 리뉴얼 버전은 feature/current 브랜치에서 확인할 수 있습니다.

main 브랜치의 cline_mcp_setting.json 파일을 이용해서 Cline MCP 서버를 사용할 수 있습니다.