[둥지] 포트폴리오 완성을 위한 메인 페이지 UI/UX 리디자인

이대로 포트폴리오를 마감하기에, 디자인적으로나 사용자 경험 측면으로나 부족함이 보여서 팀원들을 설득한 끝에, UI/UX를 수정하기로 했다.

서버를 닫을 계획이기 때문에 우리의 서비스를 보여줄 수 있는 공간이 github README에 포함된 이미지 혹은 gif 뿐이다. 그래서 더더욱 포트폴리오에 첨부할 이미지가 실제 서비스처럼 그럴싸해보이는 게 중요하다고 생각했다. 수많은 포트폴리오와 프로젝트 중에서 1초라도 더 머물 수 있게 하는 데에 있어서, 우리 서비스의 메인 페이지는 첫인상과 다름 없다.

이전의 페이지도 충분히 귀엽고 깔끔하지만, 그건 어디까지나 애정을 갖고 개발한 우리의 시선일 뿐이다. 어떤 서비스인지 모르는 사람이 처음 메인 페이지에 들어왔을 때, 어떤 버튼을 눌러야 하고, 무얼 해야 하는지 유도할 수 있는 UX의 필요성을 느꼈다. 특히 ‘둥지 스캔하기’가 둥지 서비스의 첫 액션이 되어야 하기 때문에 더 중요하다.

BEFORE

기존 메인 페이지 화면

Gemini와 ChatGPT에게 우리의 메인 페이지 화면을 피드백하고 최신 UI/UX 트렌드를 반영해서 수정안을 달라고 했을 때, 다음과 같은 답변이 돌아왔다.

### 1\. 현행 디자인 평가 (Design Review)

#### 👍 긍정적인 점 (Pros)

  * **일관된 톤앤매너:** '둥지', '어미새', '아기새'라는 컨셉에 맞춰 따뜻한 베이지색 배경과 파스텔 톤의 포인트 컬러(연두색, 하늘색)를 사용하여 심리적 안정감을 줍니다. 계약을 앞둔 초년생의 불안함을 낮춰주는 훌륭한 색채 설계입니다.
  * **직관적인 아이콘:** 각 기능(스캔, 플랜, 챗봇, 법률)을 대표하는 새 일러스트가 매우 귀엽고 직관적이라 텍스트를 읽지 않아도 기능을 유추하기 쉽습니다.
  * **명확한 기능 구분:** 카드 UI를 사용하여 각 기능이 독립적으로 잘 구분되어 있습니다.

#### 🔧 개선이 필요한 점 (Cons)

  * **시각적 무게 중심 (Visual Balance):**
      * 현재 화면 중앙의 '둥지 짓기 플랜' 카드가 좌우 카드에 비해 정보량이 적어 시각적으로 비어 보입니다(Whitespace 과다).
      * 반면 왼쪽 '스캔하기'는 업로드 영역 때문에 시각적 밀도가 높습니다. 이로 인해 전체적인 균형이 약간 불안정해 보일 수 있습니다.
  * **사용자 여정(User Journey)의 모호함:**
      * 사용자가 "무엇을 먼저 해야 할지" 명확하지 않습니다. '플랜'을 먼저 봐야 하는지, 당장 계약서 '스캔'을 해야 하는지 위계(Hierarchy)가 동일한 레벨로 병렬 배치되어 있습니다.
  * **Hero 섹션의 임팩트 부족:**
      * 상단 로고와 설명 텍스트가 다소 정적으로 배치되어 있어, 사용자를 바로 서비스로 끌어당기는 힘(Engagement)이 약할 수 있습니다.

-----

### 2\. 최신 트렌드를 반영한 화면 재배치 (Redesign Proposal)

최신 UI 트렌드인 **Bento Grid (벤토 그리드)** 스타일과 **스토리텔링형 UX**를 접목하여 재구성을 제안합니다.

#### **컨셉: "여정의 시작부터 완료까지"**

**[섹션 1: Hero Area - 동적이고 명확한 제안]**

  * **현재:** 로고 + 설명글
  * **변경:**
      * 문구를 더 능동적으로 변경합니다. (예: "첫 자취, 계약서 확인하셨나요?")
      * **검색창/진단바 추가:** "주소만 입력하면 등기부등본 위험도를 1초 만에 확인해드려요"와 같은 **Micro-Action**을 상단에 배치하여 즉각적인 참여를 유도합니다.

**[섹션 2: Bento Grid 레이아웃 (핵심 기능 재배치)]**
화면 중앙의 3단 구성을 **2:1 또는 비대칭 그리드**로 변경하여 정보의 위계를 만듭니다.

> **배치 예시:**
>
> | (1) 둥지 짓기 플랜 (Main Card) | (2) 둥지 스캔하기 (Action Card) | (3) 어미새 챗봇 & 법률 사전 (Supporter) |
> | :--- | :--- | :--- |
> | **가로로 긴 형태 (Timeline UI)**| **정사각형 또는 세로형** | **하단에 2분할로 배치하거나, 우측 하단에 (2)번 밑에 배치** |
> | 집 구하기 전체 단계를 보여줌. | 파일 드래그 & 드롭 영역 강조. | 궁금할 때 언제든 누를 수 있는 '도우미' 역할. |
> | 현재 나의 단계(예: 가계약금 입금 전)를 표시하여 '진척도'를 보여주는 방식. | 가장 강력한 기술 기능이므로 우측 상단에 배치하여 접근성 높임. | |

#### **디테일한 UI 트렌드 적용**

1.  **Glassmorphism (글래스모피즘) 터치:**
      * 현재의 불투명한 흰색 카드 대신, 배경의 베이지색이 살짝 비치는 \*\*반투명한 유백색 배경 + 부드러운 그림자(Soft Shadow)\*\*를 적용하여 깊이감을 줍니다. 따뜻한 느낌을 유지하면서도 현대적인 느낌을 줍니다.
2.  **마이크로 인터랙션 (Micro-interaction):**
      * '스캔하기' 영역에 마우스를 올리면 새가 문서를 물고 날아오는 듯한 작은 애니메이션을 추가합니다.
      * '플랜'의 단계별 진행 바(Progress bar)를 넣어 성취감을 줍니다.
3.  **CTA 버튼 강조:**
      * 현재 업로드 박스 안의 화살표 아이콘을 더 강조하거나, 브랜드 컬러(연두색)를 활용한 버튼("계약서 분석 시작하기")을 명시적으로 배치합니다.

최신 UI/UX 트렌드 반영한 수정 제안

프론트 작업할 때 컬러칩 고르는 게 정말 어려웠는데 베이지/브라운 톤으로 정리되니까 한결 무게감이 느껴지고 정돈되어 보였다.

하지만 이제와서 디자인을 수정하기에, 특히 컬러를 바꾸기에 품이 정말 많이 드는 작업일 것 같아서 선뜻 해보겠다고 말하기가 어려웠다. 그래도 다들 컬러를 바꾼 게 훨씬 이쁘다는 의견이라 고생을 감내하기로 했다.

버튼 레이아웃 같은 경우, ‘둥지 스캔하기’와 ‘둥지 계약 체크리스트’가 메인이고 두 기능의 순차적 실행을 암시할 수 있는 방법에 대해 고민을 많이 했다. 단순히 비대칭 배치를 가져가기에는 순차적 실행을 유도하지 못 할 것 같았다. 그러면서도 챗봇은 순차적 실행에는 포함되지 않지만, 입력창만 띄워놓기에는 챗봇의 존재감이 흐려질 수 있어서 마땅한 답이 나오지 않았다.

---

색상부터 바꿔봅시다.

사용한 컬러

Color Palette

#F2E5D5 #A68263 #402211 #8C0707 #F2F2F2

레퍼런스

사용자 여정을 고려한 레이아웃 배치 예시

수정한 파일들

• src/components/common/: 컴포넌트 스타일 정의
  • DocumentAnalysisModal.tsx: 계약서/등본/건축물대장 정밀 분석 모달
  • InsuranceCheckModal.tsx: 보증보험 가입 여부 모달
  • Navigation.tsx: 상단 네비게이션바
  • RiskAnalysisModal.tsx: 깡통전세 위험도 분석 모달
  • NestScanModal.tsx: 둥지 스캔하기 모달
  • 언급하지 않은 파일들은 모두 사용하지 않음 (삭제해도 됨)
• src/pages/: 각 페이지 템플릿
  • HomePage.tsx: 메인 페이지
  • ChecklistPage.tsx: 둥지 계약 체크리스트 페이지
  • ChatbotPage.tsx: 챗봇 페이지
  • LoginPage.tsx: 로그인 페이지
  • SignupPage.tsx: 회원가입 페이지
  • MyPage.tsx: 마이페이지
  • 언급하지 않은 파일들은 모두 사용하지 않음 (삭제해도 됨)

AFTER

색상을 위주로 바꾸면서, 최신 트렌드인 글래스모피즘과 Bento 배치 방식을 도입한 디자인으로 수정헀다. 아직 메인 페이지의 레이아웃이 확정되지 않아 보완이 필요하다.

메인페이지

둥지스캔하기 모달

체크리스트 페이지

등기부등본 정밀 분석 모달

챗봇 페이지

로그인 페이지

회원가입 페이지

마이페이지 내 프로필

마이페이지 내 주택 정보

마이페이지 내 대화 기록

마이페이지 내 저장한 링크

가장 먼저 ‘스캔하기’를 유도하려면?

이제 가장 큰 문제, 메인 페이지 레이아웃 수정만이 남았다.

“처음 방문한 사용자가 ‘둥지 스캔하기’로 가지고 있는 서류를 업로드하면서 둥지 서비스에 발을 들이게 된다”

이게 나의 목표였다. 설명하지 않고도 화면 디자인으로 개발자의 의도를 전하고 싶었다.

BEFORE보다 AFTER에서 ‘체크리스트’ 기능에 무게감이 실리긴 했지만 여전히 ‘스캔하기’ -> ‘체크리스트’의 위계를 나타내기엔 부족했다.

그래서 여러 사람의 조언을 구하고 AI에게도 아이디어를 얻었으나, 썩 내키지는 않았다.

처음에는 STEP으로 단계를 명시하는 방법을 생각했으나, ‘챗봇’은 이 STEP에 끼워줄 수 없어서 애매했다.

습작1 - STEP으로 표시해볼까

그 다음으로는 ‘스캔’ -> ‘체크리스트’를 화살표로 표시하고 배경을 한 번 더 감싸서 색으로 구분을 두는 것이었다. 여전히 챗봇의 위치가 애매하다.

습작2 - 배경색으로 구분하자

그래도 이게 최선인 것 같아서 열심히 기존 디자인 컨셉에 맞췌서 수정했다.

AI한테 아무리 코드를 달라고 시켜도 기능을 연결하지 않거나, 컬러를 바꾸거나, 이전 명령을 무시하거나 등등 나를 화나게 해서 결국 내가 손수 하나하나 바꿔갔다. 그라데이션도 열심히 넣고, 그림자도 넣고, 글래스모피즘 흉내낸다고 노력했는데 팀원이 그라데이션 빼자고 해서 좀 슬펐음… 그래도 이제 React 무섭지 않아.

최최최최종.png

짜잔! 이제 진짜 끝끝!!!

최종 메인화면