Antigravity와 험난한 UI 수정기

개발 현장에서 디자인과 기능을 맞추다 보면, 기획 단계에서 예상치 못한 변수들을 마주하게 됩니다. 특히 '데이터의 길이'나 '정보의 밀도'에 따른 가독성 문제는 실제 데이터를 넣어보기 전까지는 체감하기 어렵죠.

오늘은 시설 관리 서비스의 목록 화면(Facility Card)을 개발하면서, AI툴과 UI를 점진적으로 개선해 나간 과정을 생생한 대화 형식으로 기록해 보았습니다.

---

초기 화면

---

1. 첫 번째 이슈: 3자리 숫자와 레이아웃 깨짐

[문제 상황]
시설 카드 내의 인원 정보(정원, 현원 등)가 3자리를 넘어가는 경우, 텍스트가 다음 줄로 밀려 내려가면서 전체적인 카드 높이가 들쭉날쭉해지는 현상이 발생했습니다.

💬 사용자 피드백:

"목록 화면에서 인원 관련 자리수가 3자리가 넘어가면 줄바꿈 되어서 길어지게 나오는 경우가 있는데 해당 부분 수정해 주세요."

🛠️ 해결 방안 및 기술적 응답:
시설 카드에서 인원 수가 많아질 때 줄바꿈이 일어나는 문제를 즉시 해결했습니다.

• whitespace-nowrap 적용: CSS 속성을 추가하여 글자가 강제로 잘리거나 줄바꿈되지 않도록 고정했습니다.
• 간격(Gap) 최적화: 항목 간의 기본 간격을 조정하여 3자리 이상의 숫자도 영역을 침범하지 않고 깔끔하게 표시되도록 수정했습니다. 🌲✨

---

2. 두 번째 이슈: 정보 간의 간격과 가독성

[문제 상황]
줄바꿈은 막았지만, 이번에는 정보들이 너무 빽빽하게 붙어 있어 가독성이 떨어진다는 문제가 제기되었습니다.

💬 사용자 피드백:

"변경한 부분이 붙어서 나와서 보기에 안 좋은데 개선해 줘."

🛠️ 해결 방안 및 기술적 응답:
시설 카드 내 항목들이 너무 붙어 보이는 답답함을 해소하기 위해 여백 시스템을 재설계했습니다.

• 여백 확대: 정원, 현원, 대기 정보 사이의 간격을 gap-x-6으로 넓히고, 아이콘과 텍스트 사이의 간격도 미세하게 조정했습니다.
• 배지 스타일 개선: 대기 인원 표시의 패딩을 늘리고 모서리를 둥글게(Rounded) 처리하여 시각적인 구분감을 주었습니다.
• 거리 정보(km) 강조: 제목 옆의 거리 표시에 배경색과 테두리를 추가하여 독립된 정보임을 명확히 했습니다. 🌲✨

---

3. 세 번째 이슈: 정보 분리를 위한 구조적 실험

[문제 상황]
여전히 정보들이 섞여 보인다는 의견에 따라, 레이아웃 자체를 수직 구조로 변경하는 과감한 시도를 해보았습니다.

💬 사용자 피드백:

"정원, 현원, 대기 부분이 너무 붙어 나와서 보기에 안 좋아. 보기 좋게 개선해 줘."

🛠️ 해결 방안 및 기술적 응답:
정보의 독립성을 극대화하기 위해 레이아웃을 완전히 재구성했습니다.

• 세로 배치 구조: 기존의 가로 나열 방식 대신, 상단에 라벨(정원, 현원)을 두고 하단에 값을 배치하는 수직 구조로 변경했습니다.
• 수직 구분선 추가: 항목 사이에 얇은 border-line을 삽입하여 각 정보가 섞이지 않도록 차단벽을 세웠습니다.
• 컬러 강조: 대기 인원을 오렌지색으로 강조하여 중요 정보를 부각했습니다. 🌲✨

---

4. 네 번째 이슈: 디자인 회귀와 디테일 최적화

[문제 상황]
세로 배치는 정보 분리에는 효과적이었으나, 목록의 세로 길이가 너무 길어지는 부작용이 있었습니다. 결국 기존의 가로 배치 스타일로 돌아가되, 디테일을 최고조로 끌어올리는 방향으로 선회했습니다.

💬 사용자 피드백:

"이렇게 말고 기존에서 정원, 현원 대기 간격을 조정하는 게 좋을 거 같아."

🛠️ 해결 방안 및 기술적 응답:
사용자 피드백을 수렴하여 익숙한 가로 배치로 복구하고, '간격의 묘미'를 살리는 데 집중했습니다.

• 비주얼 요소 보강: 텍스트만 있어 허전했던 부분에 정원 아이콘과 현원 상태 표시 점(Green Dot)을 다시 배치했습니다.
• 은은한 효과: 현원 표시 점에 글로우(Glow) 효과를 추가하여 생동감을 더하고, 대기 인원 영역에는 은은한 배경색을 입혀 정돈된 느낌을 주었습니다. 🌲✨

---

5. 다섯 번째 이슈: 강약 조절 (Visual Hierarchy)

[문제 상황]
대기 인원 영역의 강조가 너무 강해 전체적인 균형을 해친다는 의견이 있었습니다.

💬 사용자 피드백:

"대기 부분이 너무 도드라져 보여."

🛠️ 해결 방안 및 기술적 응답:
디자인의 강약을 조절하여 시각적 피로도를 낮췄습니다.

• 일관성 유지: 정원, 현원 정보와 동일한 스타일로 맞추기 위해 튀는 배경 박스와 테두리, 그림자 효과를 제거했습니다.
• 포인트 컬러 활용: 박스 형태 대신 주황색 점(Dot)만 사용하여 '대기' 상태임을 암시하면서도 조화롭게 어울리도록 수정했습니다. 🌲✨

---

6. 최종 단계: 사용자 편의성과 정보 재배치

[최종 개선 사항]
가독성의 완성은 데이터의 '표기 방식'과 '우선순위'에 있습니다.

💬 사용자 피드백:

"숫자 표시할 때 1000자리마다 콤마(,)로 구분해 줘. 그리고 시설 종류가 맨 앞부분에 나오고 거리 표시를 등급 표시 있는 라인으로 옮기면 어떨까?"

🛠️ 해결 방안 및 기술적 응답:
데이터 인지 속도를 높이고 정보 계층 구조를 최적화했습니다.

• 천 단위 쉼표 일괄 적용: 시설 정원, 현원, 비용 등 서비스 내 모든 숫자 지표에 toLocaleString()을 적용하여 가독성을 높였습니다.
• 정보 재배치:

1. 시설 종류 우선: 사용자가 가장 궁금해하는 시설 종류를 제목 맨 앞으로 이동.
2. 거리 표시 이동: 제목 라인을 비우고, 등급 배지 라인으로 거리 정보를 옮겨 시각적 노이즈를 제거했습니다.

이제 훨씬 전문적이고 사용자 친화적인 목록 화면을 완성하게 되었습니다! 🌲✨

---

📝 마치며

바이브 코딩에서 의도를 전달하는게 상당히 힘들다고 느꼈습니다. Antigravity의 문제인지 수정해달라고 하면 초기 상태로 돌아가는 현상도 자주 발생해서 되돌리기도 많이 사용하게 되네요. 더 많은 대화가 있었지만 지쳐서 중간과정은 넣지 않았습니다.

더 잘하기 위한 좋은 방법 있으면 공유해주세요.(캐시 때문에도 제대로 반영 안 되는 것처럼 보이는 경우도 있다는 점 체크!!)

---