[육군본부] 26.04.24 바이브코딩 세부 프롬프트

분류: 자료 · 2026-04-23

아래 내용을 곧바로 코덱스, 안티그래비티에 플랜모드로 입력 하면 됩니다!

디지털 명함

모바일 우선 반응형 디지털 명함 웹페이지를 만들어줘.
목적은 ‘처음 보는 사람이 5초 안에 내 정체성과 연락 방법을 이해하는 것’이다.

첫 화면에는 프로필 이미지, 이름, 직함, 한 줄 소개, 핵심 CTA 버튼 2개(연락하기, 프로필 저장)를 배치하고, 그 아래에는 이메일·전화·회사명·위치·웹사이트·SNS 링크를 정돈된 정보 블록으로 구성해줘.
QR 코드는 하단 또는 우측 보조 영역에 넣되, 시각적으로 잘 보이면서도 메인 정보보다 덜 강조되게 해줘.
디자인은 과하지 않은 프리미엄 미니멀 스타일로, 밝은 배경과 높은 가독성, 충분한 여백, 선명한 타이포그래피를 사용해줘.

HTML/CSS/JS 한 파일로 작성하고, 다크 모드 토글, 연락처 저장 버튼 UI, 모바일에서 손가락으로 누르기 쉬운 버튼 크기, 접근성 좋은 대비를 포함해줘. 더미 텍스트는 한국어로 채우고, 실제 배포 가능한 완성도로 만들어줘.

AI 템플릿 느낌이 나지 않게, 실제 디자이너가 만든 듯한 디테일로 구성해줘.
정보 위계가 분명해야 하며, 첫 화면에서 핵심 메시지가 바로 보여야 한다.
모바일 화면 기준으로 먼저 설계하고, 데스크톱에서 자연스럽게 확장되게 해줘.
색상은 2~3개 톤 안에서 절제해서 사용하고, CTA만 선명하게 강조해줘.
접근성, 가독성, 버튼 터치 영역, 로딩 가벼움까지 고려한 실전형 결과물로 만들어줘.

1페이지 포트폴리오

전문직 종사자 또는 프리랜서를 위한 1페이지 포트폴리오 사이트를 만들어줘.

이 사이트의 목표는 방문자가 첫 화면에서 ‘이 사람이 어떤 분야의 전문가인지’, ‘어떤 강점이 있는지’, ‘무슨 작업을 했는지’를 빠르게 파악하도록 하는 것이다.
섹션 구성은 Hero, About, Core Strengths, Featured Projects 3개, Career Summary, Contact 순서로 해줘.
Hero에는 이름, 역할, 차별화된 한 줄 가치 제안, 대표 CTA 버튼(프로젝트 보기, 연락하기)을 넣고, Featured Projects에는 각 프로젝트마다 프로젝트명, 문제 상황, 내가 한 역할, 핵심 결과를 짧고 강하게 보여줘.
디자인은 깔끔하고 신뢰감 있는 에디토리얼+프로덕트 스타일로 하고, 과도한 애니메이션 대신 스크롤 진입 시 부드러운 reveal 효과만 사용해줘.
채용 담당자나 클라이언트가 읽기 쉽게 정보 위계를 분명히 하고, 프로젝트 썸네일은 이미지가 없어도 자연스럽게 보이도록 카드형 placeholder를 포함해줘.
HTML/CSS/JS 한 파일로 만들고, 모바일 최적화, 다크 모드, 부드러운 스크롤 네비게이션, 접근성, 한국어 더미 콘텐츠를 포함해줘.

AI 템플릿 느낌이 나지 않게, 실제 디자이너가 만든 듯한 디테일로 구성해줘.
정보 위계가 분명해야 하며, 첫 화면에서 핵심 메시지가 바로 보여야 한다.
모바일 화면 기준으로 먼저 설계하고, 데스크톱에서 자연스럽게 확장되게 해줘.
색상은 2~3개 톤 안에서 절제해서 사용하고, CTA만 선명하게 강조해줘.
접근성, 가독성, 버튼 터치 영역, 로딩 가벼움까지 고려한 실전형 결과물로 만들어줘.

반려동물 소개 페이지

반려동물을 소개하는 감성적인 싱글 페이지 웹사이트를 만들어줘.

전체 목표는 ‘우리 반려동물의 성격과 매력을 한 페이지 안에서 사랑스럽게 전달하는 것’이다.
상단 Hero에는 큰 대표 이미지 영역, 이름, 나이, 품종, 별명, 한 줄 소개를 넣고, 이어서 Personality, Favorites, Daily Routine, Photo Gallery, Fun Facts 섹션을 구성해줘.
Personality에서는 성격 키워드를 배지 형태로 보여주고, Favorites에서는 좋아하는 음식·장난감·산책 코스·싫어하는 것을 아이콘과 함께 보여줘.
Daily Routine은 아침부터 밤까지의 일과를 타임라인으로 표현하고, Fun Facts에는 특이한 습관이나 웃긴 에피소드를 카드 형태로 넣어줘.
전체 디자인은 따뜻하고 부드러운 파스텔 컬러 기반으로, 귀엽지만 유치하지 않은 수준의 세련된 일러스트 감성을 반영해줘.
모바일에서 특히 예쁘게 보이도록 카드 간격과 타이포그래피를 최적화하고, 다크 모드에서도 분위기가 유지되게 해줘.
HTML/CSS/JS 한 파일로 만들고, 한국어 더미 텍스트와 이미지 placeholder를 포함해줘.

AI 템플릿 느낌이 나지 않게, 실제 디자이너가 만든 듯한 디테일로 구성해줘.
정보 위계가 분명해야 하며, 첫 화면에서 핵심 메시지가 바로 보여야 한다.
모바일 화면 기준으로 먼저 설계하고, 데스크톱에서 자연스럽게 확장되게 해줘.
색상은 2~3개 톤 안에서 절제해서 사용하고, CTA만 선명하게 강조해줘.
접근성, 가독성, 버튼 터치 영역, 로딩 가벼움까지 고려한 실전형 결과물로 만들어줘.

여행 기록 페이지

개인 여행 기록을 위한 감성적인 원페이지 웹사이트를 만들어줘.

목적은 여행 사진을 단순 나열하는 것이 아니라, ‘언제 어디를 어떻게 여행했고 무엇이 기억에 남았는지’를 스토리처럼 전달하는 것이다.
첫 화면에는 여행 제목, 도시 또는 국가명, 여행 날짜, 대표 이미지, 한 줄 요약을 배치하고, 아래에는 Day 1 / Day 2 또는 장소별 타임라인 구조로 여행 기록을 정리해줘.
각 기록 블록에는 사진 영역, 장소명, 짧은 메모, 기억에 남는 포인트, 교통/맛집/풍경 같은 태그를 넣어줘.
중간에는 여행 경로 요약 카드나 여행 정보 요약(기간, 동행, 날씨, 예산 느낌)을 추가하고, 하단에는 사진 갤러리와 ‘이번 여행에서 가장 좋았던 순간’ 같은 회고 섹션을 넣어줘.
디자인은 감성적인 매거진형 레이아웃으로, 여백과 큰 사진, 세련된 serif 또는 editorial 분위기의 타이포그래피를 활용해줘.
HTML/CSS/JS 한 파일로 만들고, 모바일 반응형, 다크 모드, 가벼운 스크롤 애니메이션, 한국어 더미 텍스트를 포함해줘.

AI 템플릿 느낌이 나지 않게, 실제 디자이너가 만든 듯한 디테일로 구성해줘.
정보 위계가 분명해야 하며, 첫 화면에서 핵심 메시지가 바로 보여야 한다.
모바일 화면 기준으로 먼저 설계하고, 데스크톱에서 자연스럽게 확장되게 해줘.
색상은 2~3개 톤 안에서 절제해서 사용하고, CTA만 선명하게 강조해줘.
접근성, 가독성, 버튼 터치 영역, 로딩 가벼움까지 고려한 실전형 결과물로 만들어줘.

개인 블로그 랜딩

개인 브랜딩형 블로그 랜딩 페이지를 만들어줘.

이 페이지의 목표는 ‘방문자가 블로그의 주제, 필자의 관점, 읽을 만한 글’을 첫 화면에서 바로 이해하도록 하는 것’이다.
Hero 섹션에는 블로그 이름, 짧은 소개 문장, 핵심 키워드 태그, 대표 CTA 버튼(최신 글 보기, 소개 보기)을 배치해줘.
그 아래에는 Featured Posts 3개, Latest Posts 목록, Category Tags, About the Author, Newsletter 또는 구독 입력 영역을 배치해줘.
Featured Posts는 썸네일, 제목, 짧은 요약, 읽는 시간 표시가 있는 카드 형태로 하고, Latest Posts는 더 가볍고 빠르게 훑어볼 수 있는 리스트 형태로 구성해줘.
전체 디자인은 조용하고 지적인 분위기의 에디토리얼 스타일로, 가독성이 좋은 타이포그래피와 넉넉한 여백을 사용해줘.
너무 기업형 마케팅 랜딩처럼 보이지 않게 하고, 한 사람이 꾸준히 생각을 기록하는 따뜻한 개인 미디어 톤을 유지해줘.
HTML/CSS/JS 한 파일, 반응형, 다크 모드, 한국어 더미 텍스트, 부드러운 hover/scroll 효과를 포함해줘.

AI 템플릿 느낌이 나지 않게, 실제 디자이너가 만든 듯한 디테일로 구성해줘.
정보 위계가 분명해야 하며, 첫 화면에서 핵심 메시지가 바로 보여야 한다.
모바일 화면 기준으로 먼저 설계하고, 데스크톱에서 자연스럽게 확장되게 해줘.
색상은 2~3개 톤 안에서 절제해서 사용하고, CTA만 선명하게 강조해줘.
접근성, 가독성, 버튼 터치 영역, 로딩 가벼움까지 고려한 실전형 결과물로 만들어줘.

MBTI식 성격 테스트

MBTI 스타일의 성격 테스트 웹앱을 만들어줘.

단, 공식 MBTI 검사처럼 보이기보다 ‘가볍고 재미있게 해보는 성향 테스트’ 느낌으로 구성해줘.
총 12~16문항으로 만들고, 각 문항은 2지선다 또는 5점 척도 중 하나로 통일해줘.
질문은 E/I, S/N, T/F, J/P 네 축에 고르게 배분하고, 각 응답이 어느 성향 점수에 반영되는지 내부 로직으로 계산해 최종 4글자 성향 유형을 도출해줘.
진행률 표시 바를 넣고, 한 번에 한 문항씩 보이게 해서 몰입감 있게 만들어줘.
결과 화면에는 성향 코드, 한 줄 요약, 성격 특징 3개, 잘 맞는 일하는 방식, 추천 루틴, 다시 테스트하기 버튼을 넣어줘.
디자인은 밝고 친근한 인터랙티브 카드형 UI로 하고, 모바일에서 특히 사용하기 편하게 만들어줘.
HTML/CSS/JS 한 파일로 작성하고, 다크 모드, 부드러운 전환 애니메이션, 한국어 질문/결과 더미 데이터를 포함해줘.

처음 실행했을 때 바로 쓸 수 있도록 데이터가 필요할 경우 샘플 데이터도 함께 넣어줘.
모바일 사용성이 좋아야 하며 버튼, 입력창, 카드 간격을 충분히 확보해줘.
디자인은 템플릿 같지 않게, 실제 서비스 MVP 수준으로 정돈해줘.
애니메이션은 과하지 않게, 사용성을 해치지 않는 범위에서 넣어줘.

점심 메뉴 룰렛

점심 메뉴를 랜덤으로 골라주는 웹앱을 만들어줘.

메인 기능은 원형 룰렛 애니메이션이며, 기본 메뉴 예시 810개를 넣고 사용자가 직접 메뉴를 추가·삭제할 수 있게 해줘.
룰렛 중앙에는 ‘돌리기’ 버튼을 두고, 버튼을 누르면 35초 동안 자연스럽게 회전한 뒤 당첨 메뉴에서 멈추게 해줘.
결과가 나오면 화면 중앙 또는 모달로 ‘오늘의 점심은 ○○!’처럼 크게 보여주고, 다시 돌리기 버튼과 ‘이 메뉴 빼기’ 기능도 넣어줘.
디자인은 유쾌하고 경쾌한 컬러를 쓰되 너무 장난감처럼 유치하지 않게, 깔끔한 캐주얼 앱 느낌으로 만들어줘.
애니메이션의 감속이 부드럽고 결과가 명확하게 인지되도록 만들어주고, 모바일에서도 버튼과 룰렛이 잘 보이게 반응형으로 구성해줘.
HTML/CSS/JS 한 파일로 작성하고, 사운드 없이도 충분히 재밌는 인터랙션을 구현해줘. 한국어 UI와 기본 메뉴 데이터 포함.

처음 실행했을 때 바로 쓸 수 있도록 샘플 데이터도 함께 넣어줘.
모바일 사용성이 좋아야 하며 버튼, 입력창, 카드 간격을 충분히 확보해줘.
디자인은 템플릿 같지 않게, 실제 서비스 MVP 수준으로 정돈해줘.
애니메이션은 과하지 않게, 사용성을 해치지 않는 범위에서 넣어줘.

습관 트래커

개인용 습관 트래커 웹앱을 만들어줘.

사용자는 습관 이름을 추가하고, 오늘 그 습관을 했는지 체크할 수 있어야 한다.
데이터는 localStorage에 저장해서 새로고침 후에도 유지되게 해줘.
메인 화면에는 오늘의 습관 목록, 각 습관의 연속 성공 일수(streak), 이번 주 달성률, 전체 완료 개수를 보기 좋게 보여줘.
각 습관은 체크 버튼 하나로 기록할 수 있게 하고, 주간 캘린더 또는 작은 히트맵 스타일의 시각 요소를 넣어서 누적 기록이 보이게 해줘.
습관 추가, 수정, 삭제 기능을 포함하고, UI는 빠르고 직관적이어야 하며 기록에 2~3초 이상 걸리지 않게 설계해줘.
디자인은 미니멀하고 생산성 앱다운 신뢰감 있는 분위기로, 색상은 절제하고 완료 상태만 선명하게 강조해줘.
HTML/CSS/JS 한 파일로 만들고, localStorage를 사용하며, 한국어 UI, 모바일 반응형, 다크 모드를 포함해줘.

처음 실행했을 때 바로 쓸 수 있도록 샘플 데이터도 함께 넣어줘.
모바일 사용성이 좋아야 하며 버튼, 입력창, 카드 간격을 충분히 확보해줘.
디자인은 템플릿 같지 않게, 실제 서비스 MVP 수준으로 정돈해줘.
애니메이션은 과하지 않게, 사용성을 해치지 않는 범위에서 넣어줘.

To-Do 리스트

실제로 매일 쓸 수 있는 To-Do 리스트 웹앱을 만들어줘.

사용자는 할 일을 빠르게 추가하고, 완료 체크, 삭제, 중요 표시, 상태별 필터(전체/진행중/완료)를 사용할 수 있어야 한다.
입력창은 상단에 고정하고, 엔터키로 바로 추가되게 해줘. 각 할 일 항목에는 체크박스, 제목, 중요도 표시, 삭제 버튼을 넣고, 완료한 항목은 자연스럽게 스타일이 바뀌게 해줘.
상단 또는 하단에는 전체 개수, 남은 할 일 개수, 완료 비율을 보여주는 간단한 요약 영역을 넣어줘.
가능하면 localStorage를 사용해서 데이터가 유지되게 하고, UI는 지나치게 복잡하지 않으면서도 실제 생산성 앱처럼 정돈된 느낌으로 만들어줘.
디자인은 깔끔한 카드형 레이아웃과 선명한 정보 위계를 갖추고, 모바일에서도 입력과 체크가 편해야 한다.
HTML/CSS/JS 한 파일, 한국어 UI, 다크 모드, 부드러운 hover/transition 효과 포함.

처음 실행했을 때 바로 쓸 수 있도록 샘플 데이터도 함께 넣어줘.
모바일 사용성이 좋아야 하며 버튼, 입력창, 카드 간격을 충분히 확보해줘.
디자인은 템플릿 같지 않게, 실제 서비스 MVP 수준으로 정돈해줘.
애니메이션은 과하지 않게, 사용성을 해치지 않는 범위에서 넣어줘.

오늘의 운세

오늘의 운세를 보여주는 감성적인 웹앱을 만들어줘.

사용자가 페이지를 열면 오늘 날짜를 기준으로 하루에 한 번 고정된 운세 결과가 나오게 해줘.
즉, 같은 날짜에는 같은 결과가 나오고 다음 날짜가 되면 새로운 운세가 나오도록 날짜 기반 로직을 구현해줘.
결과는 전체 운세 한 줄 요약과 함께 연애운, 금전운, 건강운, 일/공부운, 오늘의 조언을 각각 카드 형태로 보여줘.
추가로 ‘오늘의 행운 숫자’, ‘행운 컬러’, ‘추천 행동’도 표시해줘.
디자인은 너무 미신적이거나 촌스럽지 않게, 몽환적이지만 세련된 감성으로 구성해줘.
부드러운 그라데이션 배경이나 별빛 느낌의 미세한 장식은 허용하되, 텍스트 가독성을 최우선으로 해줘.
HTML/CSS/JS 한 파일로 만들고, 한국어 문구 데이터, 다크 모드, 가벼운 등장 애니메이션, 모바일 반응형을 포함해줘.

처음 실행했을 때 바로 쓸 수 있도록 샘플 데이터도 함께 넣어줘.
모바일 사용성이 좋아야 하며 버튼, 입력창, 카드 간격을 충분히 확보해줘.
디자인은 템플릿 같지 않게, 실제 서비스 MVP 수준으로 정돈해줘.
애니메이션은 과하지 않게, 사용성을 해치지 않는 범위에서 넣어줘.