1. 개요
오늘은 바이브 코딩으로 레트로 스타일의 웹사이트를 제작해보는 과정을 소개해 드리도록 할게요.
여기서 포인트는.. 레트로 느낌을 살리기 위해 CSS, 자바스크립트 없이 HTML만 사용해서 만들었어요.
바로 프롬프트 작성을 해볼게요.
2. 프롬프트
1. 프로그램 개요
1980년대 레트로 사이버펑크 영화 아카이브 웹사이트를 만들어줘. 사이트 이름은 “NEON DREAMS”로 하고, 부제목은 “CINEMA ARCHIVE 1980-1989″로 설정해줘. 이 사이트는 마치 80년대 후반에 만들어진 것처럼 보이는 복고풍 디자인으로, 당시의 사이버펑크, 네오누아르, 신스웨이브 장르 영화들을 소개하는 아카이브 형태로 구성해줘. 전체적으로 어두운 배경에 네온 느낌의 텍스트를 사용해서 그 시대의 미래적인 분위기를 살려줘.
2. 기능
헤더 영역
- 사이트 제목 “NEON DREAMS”를 크고 굵은 흰색 폰트로 중앙에 배치해줘
- 그 아래에 작은 회색 글씨로 “▼ ▼ ▼ CINEMA ARCHIVE 1980-1989 ▼ ▼ ▼” 넣어줘
- 제목 아래에 흰색에서 회색으로 그라데이션되는 장식 라인 3개를 단계적으로 넣어줘
사이드바 시스템
- 왼쪽에 25% 너비의 사이드바를 만들어줘
- “SYSTEM STATUS”라는 제목 아래 ONLINE, ARCHIVE LOADED, PLAYBACK READY 상태 표시해줘
- “GENRE INDEX”라는 제목 아래 001부터 005까지 번호를 매긴 장르 목록 넣어줘 (CYBERPUNK, NEO-NOIR, SYNTHWAVE, RETRO-FUTURISM, CHROME DREAMS)
- 모든 텍스트는 Courier New 폰트로 터미널 느낌나게 해줘
메인 히어로 비디오
- 오른쪽 75% 공간에 “THE FUTURE IS NOW”라는 큰 제목과 “Experience the electric dreams of tomorrow, today.”라는 부제목 넣어줘
- 800×450 크기의 비디오를 자동재생, 음소거, 반복재생으로 설정해줘
추천 영화 섹션
- “FEATURED SELECTIONS”라는 큰 제목 아래 긴 점선으로 구분선 넣어줘
- 3개의 영화를 가로로 나란히 배치해줘
- 각 영화마다 400×225 크기 이미지, 제목, 짧은 시놉시스, 러닝타임 정보 넣어줘
- 영화 제목은 CHROME RUNNER, NEON NIGHTS, DIGITAL DREAMS로 설정해줘
- 각 영화 박스는 어두운 회색 테두리로 감싸줘
모션 픽처 쇼케이스
- “▲ MOTION PICTURE SHOWCASE ▲” 제목과 “AUTO-PLAY ENABLED | FULL SCREEN RECOMMENDED” 안내문 넣어줘
- 600×338 크기 비디오 2개를 나란히 배치해줘
- 각각 “ESCAPE FROM TOMORROW”와 “THE MACHINE WARRIOR” 제목과 짧은 설명 넣어줘
컬트 클래식 컬렉션
- “CULT CLASSICS COLLECTION” 제목과 “Movies that defined a generation” 부제 넣어줘
- 350×197 크기 이미지 3개를 가로로 배치해줘
- CYBORG COP (1987), DIGITAL WORLD (1982), SIGNAL (1983) 영화 정보 넣어줘
- 각 영화마다 인용구와 짧은 설명 추가해줘
미드나잇 스크리닝
- “◆ ◆ ◆ MIDNIGHT SCREENINGS ◆ ◆ ◆” 제목과 “AFTER DARK • UNDERGROUND • EXPERIMENTAL” 부제 넣어줘
- 320×180 크기의 작은 비디오 4개를 가로로 배치해줘
- MIND CONTROL, HIDDEN TRUTH, THE ENTITY, SPACE INVADERS 제목과 짧은 태그라인 넣어줘
3. 디자인/스타일
색상 팔레트
- 배경색은 완전한 검정부터 진한 회색까지 단계적으로 사용해줘
- 텍스트는 주로 흰색, 밝은 회색, 중간 회색, 어두운 회색 사용해줘
- 링크 색상도 회색 계열로 통일해줘
타이포그래피
- 메인 제목들은 Arial Black 폰트로 크고 굵게 표현해줘
- 본문은 Arial 폰트 사용해줘
- 시스템 정보나 기술적인 내용은 Courier New로 타자기/터미널 느낌 내줘
- 폰트 크기는 제목은 크게(SIZE 5-7), 본문은 작게(SIZE 1-3) 설정해줘
레이아웃
- 테이블 기반 레이아웃으로 1990년대 초반 웹사이트 스타일 재현해줘
- 섹션마다 충분한 여백 넣어줘
- 비디오와 이미지는 테두리로 프레임 효과 줘
4. 기술
HTML 구조
- HTML 4.01 Transitional DOCTYPE 선언해줘
- 한글 지원을 위해 UTF-8 인코딩 설정해줘
- 인라인 스타일 속성만 사용해서 별도 CSS 파일 없이 구현해줘
- TABLE 태그로 전체 레이아웃 구성해줘
멀티미디어
- 모든 비디오는 VIDEO 태그로 넣고 AUTOPLAY, MUTED, LOOP 속성 추가해줘
- 이미지는 IMG 태그로 넣고 WIDTH, HEIGHT 명시해줘
- 미디어 파일 경로는 CDN 링크 형태로 넣어줘
테이블 구조
- 중첩 테이블로 복잡한 레이아웃 구현해줘
- BGCOLOR로 각 섹션 배경색 다르게 설정해줘
- ALIGN=”CENTER”로 콘텐츠 중앙 정렬해줘
5. 추가 조건
복고풍 요소
- HTML 주석으로 각 섹션 설명을 한글로 넣어줘
- 푸터에 “BE KIND, REWIND” 같은 80년대 비디오 대여점 문구 넣어줘
- “SYSTEM: VHS | BETA | LASERDISC” 같은 당시 미디어 포맷 언급해줘
- 저작권 표시를 “© 1980-1989″로 설정해서 시대 설정 강조해줘
장식 요소
- 특수문자(▼, ▲, ◆, ▪, ━)를 활용해서 ASCII 아트 느낌 내줘
- 구분선이나 장식에 반복되는 특수문자 패턴 사용해줘
- 섹션 제목 앞뒤로 장식 문자 넣어서 포인트 줘
콘텐츠 톤
- 영화 설명은 짧고 임팩트 있는 문구로 작성해줘
- 80년대 SF 영화의 클리셰한 대사들 인용해줘
- 디스토피아, 사이버펑크, 네온, 신스 같은 키워드 적극 활용해줘
이 모든 요소들을 조합해서 마치 1989년에 만들어진 영화 아카이브 사이트를 2025년에 발견한 것 같은 느낌으로 완성해줘. 현대적인 웹 기술(VIDEO 태그)은 사용하되, 전체적인 디자인과 구조는 철저하게 레트로하게 만들어줘.
3. 프로그램
4. 소스코드
바이브 코딩을 공부함에 있어 이번 포스팅이 도움이 되셨길 바랄게요.