Café Aurora

과제

인터페이스 개발 수업에서 같은 요청을 세 AI(ChatGPT, Gemini, DeepSeek)에게 했어요. 가장 좋은 페이지를 고르고, 모든 줄을 이해한 뒤, 효과 하나 잃지 않고 코드를 손으로 다시 쓰는 게 과제였어요.

만든 것

• 오프닝 화면, 전용 커서, 입자 배경, 메뉴, 음료를 만드는 실험실이 있는 사이버펑크 카페. 컵은 CSS만으로 그렸어요.
• 오전 6시부터 오후 6시까지는 오로라 빵집으로 바뀌어요. 색도 메뉴도 바뀌고 빵 실험실이 돼요. 페이지가 뜨기 전에 방문자의 시계로 정해요.
• 같은 페이지를 순수 CSS, Bootstrap, Tailwind 세 가지로 만들어, CSS를 쓰는 방식마다 무엇이 바뀌는지 비교했어요.
• Linu Sites 시뮬레이터의 예시 사이트예요. 각 부분을 거기서 켜고 끌 수 있고, 가격도 함께 바뀌어요.

작동 방식

• 템플릿 하나로 13개 언어를 생성하고, 글꼴은 CDN 없이 사이트에서 직접 제공해요.
• 낮에도 밤에도 AA 대비, 터치 대상은 24 px 이상으로 axe로 확인했어요. ‘동작 줄이기’를 켜면 애니메이션이 멈춰요.
• 시뮬레이터의 명령은 Linu Sites 주소에서 온 것만 받아요.