[HTML/CSS/TypeScript] AI 채팅 화면 만들기(1)

이번에는 부트캠프에서 배운 HTML/CSS/Typescript로 Gemini API를 이용한 AI 채팅 사이트를 만들어보았습니다.
(디자인 구성은 Claude와 Gemini의 도움을 받았습니다.)

---

1. 전체 레이아웃 구조

AI 채팅 페이지의 레이아웃은 크게 사이드바(Sidebar) 와 메인 화면(Main) 두 영역으로 나뉩니다.

• 사이드바 → 채팅 목록 관리
• 메인 화면 → 실제 채팅이 이루어지는 공간

---

2. Sidebar 구조

사이드바는 Header / Body / Footer 3단 구조입니다.

영역	내용
Header	새 채팅(New Chat) 버튼 + 검색창
Body	이전 채팅 목록
Footer	내 프로필 + 설정

---

3. Main 구조

메인화면도 동일하게 Header / Body / Footer 3단 구조입니다.

영역	내용
Header	로고 + 필터
Body	채팅 메시지 영역
Footer	질문 입력창

---

4. HTML 레이아웃 구성

CSS를 입히기 전, HTML만으로 먼저 골격을 잡았습니다.

<div>
  <header class="main-header">...</header>

  <main>
    <section class="prompt-section">...</section>   <!-- 프롬프트 필터 + 카드 -->
    <section class="chat-messages">...</section>     <!-- 대화 메시지 영역 -->
    <section class="question-section">...</section>  <!-- 질문 입력창 -->
  </main>

  <aside class="chat-sessions-sidebar">...</aside>   <!-- 채팅 목록 사이드바 -->
  <div class="sidebar-overlay"></div>                <!-- 사이드바 오버레이 -->
</div>

---

5. CSS 변수 (Custom Properties)

CSS 변수는 :root에 정의하면 파일 전체에서 var(--이름) 형태로 사용할 수 있습니다.
색상과 크기를 한 곳에서 관리하기 때문에 유지보수가 훨씬 쉬워집니다.

:root {
    --color-bg: #fff5f7; /* 페이지 배경 색상 */
    --color-sidebar-bg: #fce4ec; /* 사이드바 배경 색상 */
    --color-header-bg: #ffffff; /* 메인 헤더 배경 색상 */
    --color-header-logo: #ff97af; /* 메인 헤더 로고 색상 */
    --color-accent: #ffb3c6; /* 강조 */
    --color-text: #7b3a52; /* 기본 텍스트 색상 */
    --color-border: #f4c0d1; /* 테두리 색상 */

    --font-main: "Segoe UI", "Apple SD Gothic Neo", "snas-serif";
    --radius: 12px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --transition: 0.2s ease;
}

// 사용법
.body {
	color: var(--color-text);
}

CSS로 배경과 폰트 색상을 수정해 보았습니다.

---

6. 다음 단계

다음 글에서는 아래 내용을 순서대로 다룰 예정입니다.

1. CSS로 레이아웃 잡기 (Flexbox / Grid)
2. TypeScript로 채팅, 대화 목록, 필터링 구현
3. Gemini API 연결

---

이 포스팅은 시리즈로 이어집니다. 다음 글에서는 스타일 코드 작성과, TypeScript로 간단한 채팅 기능을 구현해 보겠습니다.