UI 테마 정제 및 코드 품질 향상을 위한 10가지 핵심 가이드

작성자:

UI 디자인의 완성도는 미세한 색상 값과 일관된 사용자 경험(UX)에서 결정된다. 최근 진행된 화이트 테마 정제 작업과 코드 품질 개선 과정을 통해, 시스템의 안정성을 높이고 사용자 피드백을 반영하는 실무적인 전략을 정리하였다.

1. 사용자 중심의 화이트 테마 정제와 시각적 일관성 확보

기존 화이트 테마는 블루 테마의 색상 체계를 그대로 차용하여 시각적 구분이 모호하다는 피드백이 있었음. 이를 해결하기 위해 더 깔끔하고 중성적인 색상 팔레트를 도입하였음.

ㄱ. 테마별 색상 및 UI 요소의 정밀 조정

화이트 테마의 정체성을 확립하기 위해 주요 디자인 요소를 다음과 같이 변경하였음.

  • Primary 색상 변경: 기존 다크 그레이(#111827)에서 소프트 블루(#3B82F6)로 변경하여 가독성을 높였음.
  • Accent Green 조정: 에메랄드 그린(#22C55E)을 적용하여 긍정적인 피드백 요소를 강화하였음.
  • 그림자 및 테두리: 블루 톤의 그림자를 중성적인 회색으로 교체하고, Border Radius를 6/8/12/16px로 축소하여 더 컴팩트한 느낌을 구현하였음.

이러한 변화는 CSS 변수 구조화를 통해 관리되며, 기존 블루 테마의 데이터는 그대로 유지하여 기존 사용자들의 혼란을 방지하였음.

2. 테마 인식형 컴포넌트 설계와 CSS 전략

대시보드 내 하드코딩된 색상 문제를 해결하기 위해 [data-theme] 속성을 활용한 테마 인식 스타일링을 도입하였음.

  1. Stats Cards: 블루 테마에서는 상태별로 다양한 색상을 유지하지만, 화이트 테마에서는 회색 테두리와 아이콘으로 통일하여 정갈함을 강조함.
  2. GlossaryStatsCard: 화이트 테마 적용 시 기존의 화려한 그라데이션 대신 회색 그라데이션을 적용하여 텍스트 집중도를 높였음.

3. 사용자 피드백을 반영한 UX 간소화 및 기능 최적화

복잡한 기능을 덜어내고 직관성을 높이는 것은 코드 품질 개선만큼이나 중요함.

ㄱ. API 키 관리 및 우선순위 조정

사용자 편의를 위해 API 관리 UI를 대폭 개선하였음.

  • 타이틀 간소화: “AI 제공사 API 키 관리”를 “API 키 관리”로 변경하여 직관성을 높였음.
  • 제공사 순서 재배치: 한국어 번역 품질이 우수한 Kimi(Moonshot AI)를 1순위로 배치하고, OpenAI, Claude, Gemini 순으로 조정하였음.
  • 드래그앤드롭 도입: HTML5 Drag and Drop API를 사용하여 사용자가 직접 우선순위를 변경할 수 있는 인터랙션을 구현하였음.

ㄴ. 데이터 마이그레이션 아키텍처 단순화

실제 사용성 테스트 결과, 자동 처리 방식인 ‘간단모드’보다 정교한 제어가 가능한 ‘고급모드’의 선호도가 높았음. 이에 따라 간단모드를 과감히 삭제하고 4단계 고급모드로 프로세스를 단일화하였음.

  • 강화 기능: 필드 매핑(드래그앤드롭) 및 진행 상태 표시(Progress Steps) 고정
  • 삭제 항목: 모드 토글 버튼, 자동 처리 로직, 중복 자동 스킵 기능 등.

4. 기술적 부채 해결과 TypeScript 안정성 확보

QA 및 자체 점검 과정을 통해 발견된 런타임 에러 가능성을 사전에 차단하였음.

  • 명시적 타입 변환: sheetHasMapping 변수가 string | boolean으로 추론되던 문제를 불리언(!!) 변환을 통해 해결함.
  • API 시그니처 준수: apiError 함수에 누락되었던 에러 코드를 추가하여 표준 규격을 맞추었음.
  • Null 안정성: 유저 객체의 존재 여부를 변수로 추출하여 체크함으로써 TypeScript의 타입 추론 오류를 수정함.

5. 개선 로드맵

  • 테마 애니메이션: 테마 전환 시 부드러운 트랜지션 효과 추가.
  • 설정 저장: 사용자의 테마 선택 값을 localStorage에 저장하여 유지.
  • 코드 표준화: ESLint strict 모드 적용 및 매직 넘버의 상수화 추진.

댓글 남기기