UI/UX (User Interface/Experience) | KAITRUST AI 백과사전

📖 상세 설명

UI(User Interface)는 사용자가 제품과 상호작용하는 시각적 요소들입니다. 버튼, 아이콘, 색상, 타이포그래피, 레이아웃 등이 포함됩니다. UX(User Experience)는 사용자가 제품을 사용하면서 느끼는 전체적인 경험으로, 사용성, 접근성, 감정적 만족감을 포괄합니다.

UI와 UX는 종종 혼용되지만 다른 영역입니다. UI는 "어떻게 보이는가"에, UX는 "어떻게 작동하고 느껴지는가"에 집중합니다. 좋은 UI가 반드시 좋은 UX를 보장하지 않으며, 아름다운 디자인이라도 사용하기 어려우면 나쁜 UX입니다.

현대 UI/UX 디자인은 사용자 리서치, 와이어프레임, 프로토타이핑, 사용성 테스트로 구성된 반복적 프로세스를 따릅니다. Figma, Sketch, Adobe XD 같은 도구로 디자인하고, 사용자 테스트를 통해 검증한 후 개발팀에 전달합니다.

개발자에게 UI/UX 이해는 필수입니다. 디자인 시스템을 코드로 구현하고, 접근성(a11y)을 보장하며, 성능 최적화로 사용자 경험을 개선하는 것이 프론트엔드 개발자의 핵심 역할입니다. 디자이너와의 원활한 협업을 위해 디자인 토큰, 컴포넌트 명명 규칙 등을 공유하는 것이 중요합니다.

💻 코드 예제

/* UI/UX를 고려한 버튼 컴포넌트 (React + CSS) */

// 접근성을 고려한 버튼 컴포넌트
function Button({
  children,
  variant = 'primary',
  isLoading,
  disabled,
  onClick
}) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled || isLoading}
      aria-busy={isLoading}  // 스크린 리더 지원
      aria-disabled={disabled}
    >
      {isLoading ? (
        <span className="spinner" aria-hidden="true" />
      ) : children}
      {isLoading && <span className="sr-only">로딩 중...</span>}
    </button>
  );
}

/* UX 개선을 위한 CSS */
.btn {
  /* 터치 타겟 최소 44px (모바일 접근성) */
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;

  /* 시각적 피드백 */
  transition: transform 0.1s, box-shadow 0.2s;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* 포커스 표시 (키보드 접근성) */
.btn:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: 2px;
}

🗣️ 실무에서 이렇게 말하세요

💬 디자인 리뷰에서

"이 버튼 터치 영역이 32px인데, 모바일에서는 최소 44px은 되어야 실수로 다른 버튼을 누르는 일이 줄어요. 그리고 비활성화 상태일 때 시각적 구분이 좀 더 명확했으면 좋겠습니다."

💬 면접에서

"UI는 시각적 인터페이스 설계이고, UX는 사용자 여정 전체의 경험입니다. 저는 Figma 디자인을 코드로 옮길 때 접근성 기준(WCAG 2.1)을 지키면서 구현하고, Lighthouse로 접근성 점수를 모니터링합니다."

💬 기획 미팅에서

"사용자 테스트 결과를 보면 이 단계에서 이탈률이 높아요. 폼이 너무 길어서 그런 것 같은데, 멀티스텝 폼으로 나누고 진행 표시줄을 추가하면 완료율이 올라갈 겁니다."

⚠️ 흔한 실수 & 주의사항

❌

예쁜 것 = 좋은 UX라고 착각

시각적으로 화려해도 사용하기 어려우면 나쁜 UX입니다. 애니메이션이 과하거나, 버튼이 어디 있는지 찾기 어려우면 사용자는 이탈합니다.

❌

접근성 무시

색상 대비 부족, 키보드 네비게이션 미지원, alt 텍스트 누락 등은 장애인 사용자뿐 아니라 모든 사용자의 경험을 저해합니다.

✅

올바른 접근법

사용자 리서치 기반으로 디자인하고, 프로토타입으로 검증하고, 접근성 도구(axe, Lighthouse)로 점검하세요. 데이터 기반 반복 개선이 핵심입니다.

🔗 관련 용어

📚 더 배우기

📄 Nielsen Norman Group (UX 리서치) 🎓 Figma 리소스 라이브러리 📖 web.dev 접근성 가이드