[ChatGPT 챗봇 실습 9강] 반응형 UI, 다크모드, 입력 UX 개선

이번 강의에서는 사용자 친화적인 챗봇을 만들기 위해 반응형 레이아웃, 테마 전환 기능, 입력 UX 개선을 진행합니다.
작은 디바이스에서도 자연스럽고 쾌적하게 동작하며, 시각적인 만족감을 높이는 작업입니다.

용어 설명

• 반응형 디자인: 화면 크기에 따라 자동으로 레이아웃이 변하는 UI 구조
• 다크모드: 어두운 배경과 밝은 글씨로 구성된 사용자 선호 테마
• UX 개선: 사용자의 동작 흐름을 고려하여 인터페이스를 더 직관적으로 만드는 작업

기본 개념

• 모바일 기기에서도 메시지 창이 잘 보이도록 유연한 크기, 여백, 폰트 설정 필요
• 버튼 하나로 라이트/다크 테마를 전환하도록 전역 상태 관리 도입
• Enter로 전송, Shift+Enter로 줄바꿈 처리를 추가해 실제 메신저처럼 사용 가능하게 함

주요 사용 위치

• 공개 서비스 챗봇 UI 구현
• 기업 내부 메신저, 개인 포트폴리오용 챗봇 등에서 필수 적용 요소

구체적 코드 예시

// Enter / Shift+Enter 처리
const handleKeyDown = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    handleSend();
  }
};

<textarea
  value={input}
  onChange={(e) => setInput(e.target.value)}
  onKeyDown={handleKeyDown}
  placeholder="메시지를 입력하세요"
/>

// 다크모드 토글 (tailwind 예시)
const [dark, setDark] = useState(false);
return (
  <div className={dark ? 'dark bg-black text-white' : 'bg-white text-black'}>
    <button onClick={() => setDark(!dark)}>
      {dark ? '라이트 모드' : '다크 모드'}
    </button>
    <ChatWindow />
  </div>
);

핵심 요점 정리

• 반응형 UI는 Tailwind나 CSS Media Query로 간단히 구현 가능
• 테마 전환은 useState로 상태 관리 + 클래스 토글 방식 사용
• 입력 UX는 Enter/Shift+Enter 처리로 사용자 중심 설계 가능
  
  

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.