4화 | 댓글보다 대시보드, 그리고 전국 지도에서 서울 상세 지도까지

이번 Day4에서는 기존에 만들던 댓글/스레드 쪽을 잠깐 멈추고, 서비스의 첫인상에 더 가까운 대시보드 중심 구조로 방향을 옮겼다.

 

이전까지는 Claim, Evidence, 답글, 후보 데이터 적재 같은 백엔드 기능을 하나씩 붙여가는 흐름이었다면,

이번에는 실제로 사용자가 처음 들어왔을 때 보게 될 화면을 어떻게 구성할지, 그리고 그 화면을 받쳐줄 API를 어떻게 만들지에 더 집중했다.

 

결론부터 말하면 이번 작업은

서울시장 후보 데이터 조회 API를 대시보드용으로 정리하고,

프론트에서는 전국 지도 → 서울 상세 지도 → 구 단위 선택으로 이어지는 구조를 잡아보기 시작한 날이었다.

 

---

 

왜 댓글보다 대시보드로 방향을 틀었나

 

처음에는 Claim, Evidence, 답글 같은 커뮤니티형 흐름을 먼저 만들어두고 있었는데,

기능은 동작해도 서비스가 어떤 방향인지 한눈에 잘 안 들어오는 느낌이 있었다.

 

반면 대시보드는 첫 화면에서 바로

 

• 어떤 지역을 보고 있는지
• 어떤 선거가 있는지
• 어떤 후보를 볼 수 있는지
• 이 흐름을 보여줄 수 있다.

 

그래서 이번에는 댓글 구조를 더 깊게 파기보다,

지금까지 쌓아둔 후보 데이터와 API를 실제 서비스 화면처럼 보여주는 작업을 먼저 해보는 쪽이 더 맞다고 판단했다.

 

---

 

Day4에서 먼저 한 일: 대시보드용 백엔드 API 정리

 

프론트를 붙이기 전에 먼저 대시보드에서 쓸 API를 정리했다.

 

 

1. 서울 전체 기준 선거 종류 목록 API

서울 전체를 선택했을 때 어떤 선거를 보여줄지 내려주는 API를 먼저 만들었다.

 

GET /dashboard/regions/seoul/elections

응답은 이런 식이다.

 

[
  {
    "electionType": "MAYOR",
    "label": "서울특별시장",
    "candidateCount": 6,
    "available": true
  },
  {
    "electionType": "DISTRICT_HEAD",
    "label": "구청장",
    "candidateCount": 0,
    "available": false
  },
  {
    "electionType": "CITY_COUNCIL",
    "label": "서울시의원",
    "candidateCount": 0,
    "available": false
  },
  {
    "electionType": "DISTRICT_COUNCIL",
    "label": "구의원",
    "candidateCount": 0,
    "available": false
  }
]

아직 실제 데이터는 서울시장 후보만 적재된 상태라 MAYOR만 활성화되지만,

대시보드 구조상으로는 이후 구청장, 시의원, 구의원까지 확장할 수 있도록 API 틀을 먼저 잡아둔 셈이다.

 

---

 

2. 후보 카드 목록 API

그다음에는 특정 지역 + 특정 선거 종류 기준으로 후보 카드 목록을 보여주는 API를 만들었다.

GET /dashboard/candidates?region=seoul&electionType=MAYOR

이 API는 프론트 카드 리스트에서 바로 쓸 수 있게 최소 정보만 내려준다.

 

• id
• name
• partyName
• number
• photoUrl
• electionType
• region
• districtName

 

실제로 확인해보니 서울시장 후보 6명이 정상적으로 내려왔고,

기호 순서도 잘 정리되어 있었다.

 

---

 

3. 후보 상세 API

카드만 보이면 끝이 아니라, 클릭했을 때 상세도 필요해서 상세 조회 API도 만들었다.

GET /dashboard/candidates/{id}

여기서는 이름, 정당, 기호 같은 기본 정보뿐 아니라

나이, 성별, 직업, 학력, 경력 같은 값도 같이 내려주도록 했다.

 

예를 들어 후보 1번을 조회했을 때는 실제로 아래 같은 정보가 내려왔다.

 

• 이름
• 정당
• 기호
• 나이
• 성별
• 직업
• 학력
• 경력

 

없어도 되는 값은 null로 안전하게 처리하고,

없는 후보를 조회하면 Candidate not found 404가 내려가도록 정리했다.

 

---

 

프론트는 메인페이지를 대시보드처럼 바꾸는 쪽으로 진행

 

백엔드 API가 어느 정도 갖춰진 다음에는 프론트에서 이걸 어떻게 보여줄지 고민했다.

 

처음에는 메인에 최신 주장 목록만 있었는데,

이 상태로는 서비스가 무엇을 하려는지 한 번에 잘 안 들어왔다.

 

그래서 메인에 바로 서울 대시보드를 넣는 쪽으로 가봤는데,

막상 하다 보니 이 방식은 나중에 전국 → 시도 → 구 단위로 확장할 때 URL 구조와 탐색 흐름이 애매해질 가능성이 컸다.

 

그래서 이후에는 단순히 메인에 서울 화면을 박는 대신,

전국 지도 중심의 대시보드 구조로 재정리하는 쪽으로 방향을 잡았다.

 

---

 

전국 지도와 서울 상세 지도로 drill-down 구조 잡기

 

이번 작업에서 가장 오래 붙잡고 있었던 부분이 이 지도 구조였다.

 

내가 원한 건 이런 흐름이었다.

 

1. 처음에는 전국 지도가 보임
2. 서울 같은 지역을 클릭하면
3. 페이지가 통째로 바뀌는 게 아니라
4. 같은 대시보드 안에서 서울 상세 지도로 들어감
5. 서울 상세 지도에서는 구 단위로 나뉜 지도가 보임
6. 구를 클릭하면 우측 보드가 해당 구 기준으로 바뀜

 

말로 쓰면 단순한데, 실제로 구현해보니 생각보다 손볼 게 많았다.

 

처음엔 지도 자체가 너무 그림판처럼 보여서

“이게 실제 대한민국 지도처럼 안 보인다”는 문제가 있었고,

그다음엔 hover 반응이 거의 없거나 선택 효과가 너무 이상하게 들어가는 문제도 있었다.

 

그리고 더 중요한 문제는

전국 → 서울로 들어갈 때 사용자가 페이지 전환처럼 느낀다는 점이었다.

 

실제로 보니 메인과 대시보드가 상단 구조가 조금씩 달랐고,

헤더 아래 여백도 달라서 같은 화면 안 drill-down이라기보다 다른 페이지로 넘어가는 느낌이 강했다.

 

그래서 이 부분은 기능 추가보다도

 

• 상단 블럭을 공통화하고
• 헤더 아래 spacing을 맞추고
• 지도 영역과 우측 보드만 바뀌도록 구조를 정리하는 쪽으로 계속 수정했다.

 

---

 

서울 상세 지도도 생각보다 손이 많이 갔다

 

서울까지 들어간 다음에는 구 단위 상세 지도를 붙이기 시작했다.

 

여기서 문제는 단순히 “구역이 나뉘어 보이느냐”가 아니었다.

 

실제로 해보니까 이런 문제들이 계속 나왔다.

 

• hover해도 반응이 거의 안 보이는 문제
• 클릭 시 파란 포커스 박스 같은 이상한 효과가 나오는 문제
• 선택된 지역 테두리가 전체가 아니라 일부만 강조되는 문제
• 라벨이 도형 뒤로 숨거나 위치가 엉뚱한 데 찍히는 문제
• 구 이름이 “종로”처럼만 나오고 “종로구”까지 안 나오는 문제
• 심지어 강서구를 선택했는데 라벨이 구 중심에 안 올라가는 문제

 

결국 서울 상세 지도에서는

라벨 위치를 자동으로 대충 두는 방식은 품질이 안 나온다는 걸 확인했다.

 

그래서 나중에는 아예

“자동 배치로 끝내지 말고, 서울 25개 구 이름 좌표를 직접 보정하는 방식으로 가야 한다”는 쪽으로 방향을 잡았다.

 

이 부분은 아직 계속 다듬는 중이지만,

이번에 작업하면서 “지도 UI는 보기보다 손이 정말 많이 간다”는 걸 제대로 느꼈다.

 

---

 

지금까지 만들어진 흐름

 

현재 기준으로 보면 대시보드 쪽은 대략 이런 흐름까지 와 있다.

 

• 서울 전체 기준 선거 종류 목록 API
• 서울시장 후보 카드 목록 API
• 후보 상세 조회 API
• 전국 지도 UI
• 서울 상세 지도 drill-down 구조 시도
• 우측 보드에서 지역/선거 종류를 보여주는 구조
• 서울 구 단위 지도에서 hover/click 인터랙션 보정 중

 

즉 아직 완성이라기보다는,

서비스의 첫 화면과 탐색 흐름의 뼈대를 잡아가는 단계에 가깝다.

 

---

 

이번에 특히 느낀 점

 

이번 Day4는 백엔드 API를 몇 개 더 만든 날이기도 했지만,

그보다 더 크게는 서비스의 정보 구조를 처음으로 진지하게 고민한 날에 가까웠다.

 

댓글이나 답글 기능은 분명 필요하지만,

처음 들어온 사용자가 무엇을 보고 어디로 들어갈지 정리되지 않으면

서비스 전체 방향도 흐릿하게 느껴진다.

 

그래서 이번에는 “뭘 더 만들까”보다

**“사용자가 처음 들어왔을 때 어떻게 탐색하게 만들까”**를 중심으로 계속 구조를 수정했다.

 

전국 지도, 서울 상세 지도, 우측 보드, 선거 종류, 후보 목록, 후보 상세가

하나의 흐름으로 이어져야 한다는 점이 조금씩 보이기 시작한 것만으로도 이번 작업은 의미가 있었다고 생각한다.

 

---

 

다음 작업은

 

다음은 크게 두 가지 중 하나가 될 것 같다.

 

첫 번째는 서울 상세 지도 라벨/구역 UX 마무리

두 번째는 선택한 구 기준으로 실제 후보/선거 데이터 연결 강화

 

즉 지금처럼 지도 껍데기와 보드 구조만 있는 수준에서 끝나는 게 아니라,

“서울 → 강남구 → 해당 구역 관련 선거와 후보”까지 자연스럽게 이어지도록 만드는 게 다음 목표다.

 

---

 

마무리

 

이번 Day4에서는

댓글 쪽보다 대시보드 쪽으로 무게를 옮기고,

백엔드에서는 선거 종류/후보 목록/후보 상세 API를 정리했으며,

프론트에서는 전국 지도와 서울 상세 지도로 이어지는 구조를 잡아보기 시작했다.

 

기능 하나를 완성했다기보다는,

서비스가 어떤 화면 구조를 가져야 하는지 방향을 잡은 날에 더 가깝다.

 

아직 지도 라벨 위치나 인터랙션처럼 손봐야 할 부분은 많지만,

적어도 이제는 이 프로젝트가 어디로 가야 하는지는 조금 더 분명해졌다.