[18편] AI 프롬프트만으로 간단한 웹 화면(HTML/CSS)이나 가젯 직접 만들기

 업무를 하거나 개인 공부를 하다 보면 나에게 딱 맞는 아주 단순한 도구가 간절해질 때가 있습니다. 예를 들어, 특정 규칙으로 글자 수를 세어주는 계산기, 공부할 때 유용한 뽀모도로 타이머, 혹은 당장 오늘 처리해야 할 일들을 빠르게 적고 지울 수 있는 초간단 웹 메모장 같은 도구들입니다. 기존의 프로그램이나 모바일 앱을 다운받아 쓰자니 광고가 너무 많거나 가입 절차가 번거롭고, 내가 원하는 핵심 기능 한두 가지만 있는 깔끔한 도구를 찾기가 의외로 어렵습니다.

"내가 코딩만 할 줄 알면 내 취향대로 만들어서 쓸 텐데"라는 생각을 해보셨을 겁니다. 예전에는 메모장 프로그램 하나를 만들려고 해도 개발 환경을 설정하고, HTML, CSS, 자바스크립트(JavaScript)의 기본 문법을 책 한 권씩 공부해 가며 며칠 밤을 새워야 했습니다. 하지만 이제는 내가 원하는 도구의 디자인과 기능 작동 방식을 말로 설명하기만 하면, AI가 단 몇 초 만에 완벽한 코드 묶음을 완성해 줍니다. 프로그래밍을 전혀 모르는 초보자도 나만의 전용 웹 도구를 만들어 실행하는 실전 노하우를 단계별로 나누어 알려드립니다.

1. 웹 화면의 기본 3요소를 이해하고 지시하기

AI에게 웹 가젯 제작을 요청하기 전에 아주 기초적인 원리만 알고 있으면 지시의 정확도가 비약적으로 올라갑니다. 웹 화면은 크게 세 가지 뼈대로 움직입니다.

• HTML (뼈대): 화면에 들어갈 글자 상자, 입력 창, 버튼 등의 요소를 배치하는 역할입니다.

• CSS (디자인): 버튼의 색상, 둥글기, 폰트 스타일, 전체적인 화면 레이아웃을 예쁘게 꾸미는 역할입니다.

• JavaScript (기능): 버튼을 클릭했을 때 어떤 연산이 일어나는지, 타이머가 어떻게 줄어드는지 등 동적인 기능을 구현하는 역할입니다.

우리는 이 세 가지 언어를 직접 코딩할 필요가 없습니다. 다만 AI에게 "HTML, CSS, 자바스크립트를 단 하나의 파일로 작동할 수 있도록 통합된 HTML 코드로 작성해 줘"라고 요구하면 됩니다. 이렇게 하면 여러 개의 파일을 생성할 필요 없이, 단 하나의 텍스트 파일만으로 내 컴퓨터에서 즉시 실행할 수 있는 간편한 가젯이 만들어집니다.

2. 원하는 가젯을 뽑아내는 실전 프롬프트 템플릿

실무에 바로 쓸 수 있는 나만의 가젯을 개발하기 위한 맞춤형 기획 프롬프트입니다. 디자인 컨셉과 작동 방식을 구체적으로 제시할수록 한 번에 완성도 높은 도구가 출력됩니다. 여기서는 '업무 효율용 D-Day 및 디데이 계산 가젯'을 예시로 들어보겠습니다.

[실전 가젯 생성 프롬프트] "너는 UI/UX 디자인 감각이 뛰어난 프론트엔드 웹 개발자야. 내가 매일 출근해서 마감 기한을 직관적으로 확인하고 관리할 수 있는 '심플 업무 디데이(D-Day) 타이머 가젯'을 만들고 싶어. 아래 조건에 맞게 코드를 짜줘.

• 레이아웃: 화면 중앙에 깔끔한 흰색 카드가 있고, 카드 모서리는 둥글게(border-radius: 12px) 처리해 줘. 배경은 부드러운 밝은 회색 테마를 적용해 줘.

• 기능: 사용자가 '목표 날짜'와 '프로젝트 이름'을 입력하고 등록 버튼을 누르면, 현재 시간 기준으로 마감일까지 남은 일(Day), 시간(Hour), 분(Minute), 초(Second)가 실시간으로 줄어드는 카운트다운 타이머가 카드 하단에 나타나야 해.

• 디자인 디테일: 버튼은 모던한 네이비 블루 컬러를 쓰고, 마우스 커서를 올렸을 때(Hover) 약간 밝아지는 효과를 넣어줘.

• 파일 형식: 다른 외부 파일 연결 없이 오직 단 하나의 HTML 파일 안에 CSS 스타일('')과 자바스크립트 기능('')이 모두 포함된 단일 소스코드로 작성해 줘."

이렇게 지시하면 AI는 모든 세부 디자인 요소를 장착한 완성형 코드를 단번에 구현해 냅니다.

3. 코딩을 몰라도 내가 만든 가젯 실행하고 보관하는 법

AI가 코드를 완성해 주면 코딩 창 우측 상단의 [Copy code] 버튼을 눌러 소스코드를 복사합니다. 그 후 내 컴퓨터에서 가젯을 실행하는 방법은 상상 이상으로 간단합니다.

1. 윈도우의 '메모장' 프로그램이나 맥(Mac)의 '텍스트 편집기'를 켭니다. (텍스트 편집기를 쓸 때는 반드시 포맷 설정을 '일반 텍스트'로 변경해야 합니다.)

2. 메모장 빈 화면에 복사한 AI 코드를 그대로 붙여넣기(Ctrl + V) 합니다.

3. 파일 저장 버튼을 누를 때가 가장 중요합니다. 파일 이름 뒤에 반드시 마침표를 찍고 '.html'이라는 확장자로 저장해야 합니다. 예: my_timer.html

4. 파일 형식은 '모든 파일(.)'로 선택하고 인코딩은 'UTF-8'로 설정한 뒤 저장합니다.

5. 저장된 파일을 더블클릭하면 평소 내가 쓰는 웹 브라우저(크롬, 에지 등) 창이 열리면서, 오직 나만을 위해 디자인된 가젯이 정상적으로 작동하는 모습을 볼 수 있습니다.

4. 주의사항: 복잡한 기능 구현 시 단계별 개발 접근하기

AI를 활용한 가젯 만들기는 매우 강력하지만, 한계점도 명확합니다. 처음부터 너무 욕심을 부려 "화려한 3D 애니메이션이 들어가고 사용자 로그인 기능과 클라우드 데이터 저장 기능이 포함된 복잡한 프로젝트 관리 툴을 만들어줘"라고 요구하면 코드의 양이 너무 방대해져 AI가 중간에 코드를 누락하거나 구동 시 알 수 없는 먹통 오류가 발생합니다.

따라서 초보자 단계에서는 서버가 필요 없는 '클라이언트 사이드(내 브라우저 안에서만 작동하는)' 기능에 집중해야 합니다. 브라우저를 껐다 켜도 데이터가 유지되게 하고 싶다면 "자바스크립트의 '로컬스토리지(localStorage)' 기능을 활용해 사용자가 입력한 데이터를 내 브라우저에 임시 저장되게 해줘"라는 문장을 덧붙이는 수준이 좋습니다. 가젯의 기본 기능을 먼저 완성해 실행해 본 뒤, "방금 만든 화면 우측 상단에 어두운 밤에 눈이 편안한 다크 모드(Dark Mode) 토글 버튼을 추가해 줘"와 같이 기능을 하나씩 단계별로 얹어가는 방식으로 개발해야 버그 없이 나에게 꼭 맞는 명품 도구를 완성할 수 있습니다.

핵심 요약

• 비전공자도 AI에게 HTML, CSS, JavaScript를 하나의 단일 소스코드 파일로 통합해 달라고 요청하면 내 전용 웹 가젯을 쉽게 만들 수 있습니다.

• 가젯 기획 시 UI 디자인(색상, 둥글기 등) 콘셉트와 기능의 작동 순서를 글로 구체화하여 제시해야 완성도가 높아집니다.

• 완성된 코드를 메모장에 붙여넣고 파일 확장자를 '.html'로 변경하여 저장하면 크롬 등의 웹 브라우저를 통해 즉시 로컬 실행이 가능합니다.

• 처음부터 복잡한 서버 연동이나 과도한 기능 구현을 요구하기보다, 로컬스토리지 임시 저장 같은 가벼운 기능 위주로 시작해 하나씩 단계를 밟아가며 업그레이드해야 오류를 방지할 수 있습니다.

다음 편 예고

다음 19편에서는 비주얼 콘텐츠 기획으로 넘어갑니다. 긴 줄글이나 데이터를 카드뉴스, 인포그래픽 제작에 용이하도록 AI를 활용해 직관적인 구조화 데이터로 가공해 내는 노하우를 상세히 다뤄보겠습니다.