AI랑 같이하는 코딩

4일차에서는 3일차에 만든 뼈대 화면에 CSS를 붙여 앱처럼 보이게 다듬습니다. 지금까지는 "보이기만 하는 구조"였다면, 오늘은 여백, 글꼴, 카드 스타일, 버튼 톤을 정리해 사용자가 보기 편한 화면으로 전환하는 단계입니다.

바이브코딩 관점에서 디자인 작업은 완성도를 과하게 올리는 날이 아니라, 다음 기능 구현(입력, 클릭, 저장)을 편하게 하기 위한 시각적 정리입니다. 초보자는 오늘 과정을 통해 CSS가 단순 꾸미기가 아니라 정보 전달력을 높이는 도구라는 감각을 익히게 됩니다.

1. 오늘 만들 기능 소개

오늘의 핵심은 CSS를 연결해 화면을 "앱다운 형태"로 만드는 것입니다. 구체적으로는 배경색 설정, 기본 글꼴 지정, 카드 박스 스타일, 제목 간격, 버튼 기본 스타일을 잡습니다. 이 작업만 해도 화면 가독성이 크게 좋아지고, 사용자가 어디를 먼저 봐야 하는지 흐름이 생깁니다.

특히 카드형 레이아웃은 하루 관리 웹앱처럼 블록 단위 정보가 많은 화면에 잘 맞습니다. 할 일 영역과 메모 영역을 시각적으로 구분하면 다음 회차에서 입력창과 버튼을 추가할 때도 훨씬 자연스럽게 확장됩니다.

2. AI에게 요청할 프롬프트

4일차는 AI에게 구조 변경보다 스타일 가이드를 요청하는 게 효율적입니다. 아래처럼 "초보자 수준 + 과하지 않은 스타일" 조건을 함께 넣어보세요.

하루 관리 웹앱 4일차야.
index.html 구조는 유지하고, style.css에 기본 앱 스타일을 만들어줘.
배경색, 카드 디자인, 제목 간격, 버튼/입력창 기본 스타일을 포함하고,
너무 화려하지 않게 초보자가 이해하기 쉬운 CSS로 작성해줘.

AI가 제안한 코드가 길다면 "필수 스타일만 남기고 40줄 내외로 줄여줘"라고 요청하면 좋습니다. 오늘 목표는 화려함보다 일관성이라는 기준을 지키면 결과물이 깔끔해집니다.

3. 코드 작성과 실행 과정

먼저 `index.html`의 ``에서 `style.css`를 연결합니다. 그다음 `style.css`에 전역 스타일(`body`, 기본 글꼴), 레이아웃 컨테이너, 카드 스타일, 버튼 스타일 순서로 작성합니다. 순서를 정해두면 나중에 수정할 때도 파일을 빠르게 읽을 수 있습니다.

직접 바꿔보기 미션으로 카드 모서리 둥글기(`border-radius`)와 그림자(`box-shadow`) 값을 조금씩 바꿔보세요. 수치를 작게 조절해보면 "어떤 값이 과하고 어떤 값이 안정적인지" 감이 빠르게 생깁니다.

4. 코드 이해하기

오늘 꼭 이해할 포인트는 "CSS 우선순위와 재사용"입니다. 공통 스타일은 상위 선택자에 두고, 카드별 차이는 개별 클래스에서 조정하면 코드가 짧고 관리가 쉬워집니다. 예를 들어 모든 카드에 공통 `.card` 스타일을 주고, 필요하면 `.todo-card`, `.memo-card`로 차이를 더하는 방식이 좋습니다.

또 하나는 "디자인도 기능의 일부"라는 점입니다. 버튼이 버튼처럼 보여야 클릭 의도가 생기고, 입력창이 명확해야 사용자가 다음 행동을 이해합니다. 좋은 CSS는 예쁜 화면이 아니라 쓰기 쉬운 화면을 만든다고 기억해두면 이후 결정이 쉬워집니다.

5. 오늘 만든 내용 정리

오늘은 CSS를 연결해 웹앱의 기본 비주얼 톤을 정리했습니다. 배경, 카드, 타이포, 여백을 맞추면서 3일차 구조가 훨씬 읽기 쉬운 화면으로 바뀌었고, 이제 사용자 입력 요소를 올릴 준비가 끝났습니다. 다음 5일차에서는 할 일 입력창과 추가 버튼을 만들어, 동작 전 단계의 UI를 완성해보겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기