< 소개 >
안녕하세요 21기 교육앱 스터디 버디 하이호입니다~~
이 사례글은 안티그래비티가 뽑아준 초안을 제가 읽어보면서 수정한 것입니다.
시도하고자 했던 것과 그 이유를 알려주세요.
단순히 줄글로 된 이력서나 노션 포트폴리오를 넘어, 저만의 개성을 듬뿍 담은 '인터랙티브 웹 포트폴리오'를 만들고 싶었습니다. 평소 좋아하던 스타듀밸리 같은 레트로 RPG 게임 감성(픽셀아트)을 살려서, 웹페이지 상에서 마을을 탐험하듯 제 역량과 이력을 확인할 수 있는 프로젝트를 구상했습니다.
저는 개발을 전혀 모르는 비개발자 기획자(주민대표 하이호)이기 때문에, AI의 도움을 100% 활용하여 순수 HTML, CSS, JavaScript만으로 복잡한 프레임워크 없이 웹 애플리케이션을 완성하는 것이 목표였습니다.
< 진행 방법 >
어떤 도구를 사용했고, 어떻게 활용하셨나요?
AI 코딩 어시스턴트를 활용해 처음부터 끝까지 기획, 이미지 에셋 생성, 웹 퍼블리싱, 애니메이션 적용, Vercel 배포까지 진행했 습니다.
[ 활용 도구 ]
클로드 - 기획을 하고 프롬프트 뽑기
AI 코딩 어시스턴트 안티그래비티 - 전체 코드 로직 설계 및 작성, 배경 투명화 스크립트 작성, Vercel 배포 지원
안티그래비티 (AI 이미지 제너레이터) - SF 테마 마을 배경 및 10명의 각기 다른 직업을 가진 픽셀아트 NPC 캐릭터 생성
Python (Pillow) - AI가 그려준 캐릭터 이미지의 흰색 배경을 투명하게 누끼 리터칭
Tip: 사용한 프롬프트 전문
가장 많은 공을 들인 SF 마을 배경과 NPC 프롬프트 중 일부입니다.
배경 프롬프트: "A cute pixel art futuristic sci-fi village background, top-down 2D view, warm pastel pixel art style like a retro RPG game. Horizontal layout (1920x900px ratio, widescreen). A cozy futuristic town with glowing neon pathways, holographic street lights... (중략) 16-bit retro game pixel art aesthetic."
NPC 프롬프트: "A single cute pixel art RPG character, 32x32 pixel style on transparent white background, front-facing. A female village leader/representative character with: short stylish hair with a small futuristic headband, a sleek sci-fi outfit... Cute chibi proportions, warm pastel pixel art style. SF/cyberpunk-lite style."
(안티그래비티야... 그런 걸 썼었구나...)
[ 핵심 작성 코드 ]
AI를 통해 구현한 핵심 로직은 'NPC 클릭 시 모달 팝업으로 능력치/퀘스트/아이템 보여주기' 였습니다. 자바스크립트 내에 NPC별 데이터를 정리하고, 탭 전환 기능을 통해 동적으로 내용을 바꿔주는 부분을 구현했습니다.
// NPC 클릭 시 모달 띄우기 로직 (일부)
document.querySelectorAll('.npc').forEach(npc => {
npc.addEventListener('click', () => {
const id = parseInt(npc.dataset.npc);
const data = NPC_DATA[id];
npc.classList.add('clicked');
// 바운스 애니메이션 이펙트
setTimeout(() => npc.classList.remove('clicked'), 300);
if (data.locked) {
openLockedModal(data); // 미해금 주민 (면접 요청 필요)
} else {
openModal(id); // 주민대표 (상세 이력 오픈)
}
});
});
(안티가 자기 코드 자랑하고 싶었나 봅니다..)
📸
< 결과와 배운 점 >
배운 점과 나만의 꿀팁을 알려주세요.
AI와의 협업 꿀팁: 코드를 전혀 모르더라도 "이 요소는 화면 맨 위에 둥둥 떠 있게 해줘", "주민을 클릭하면 회색 실루엣으로 보이게 해줘"처럼 화면에 보여지는 직관적이고 구체적인 시각화 요구를 하면 AI가 찰떡같이 CSS 애니메이션과 JS 로직으로 짜준다는 것을 배웠습니다.
(당연한 얘기를 하고 있는 안티그래비티;;)
이미지 배경 투명화의 마법: AI로 생성한 픽셀아트가 흰색 배경으로 나와 맵 위에 네모낳게 얹혀있어 어색했었는데, AI에게 파이썬 코드를 짜달라고 해서 10개 파일의 배경을 일괄 투명하게(누끼 작업) 만들 수 있었던 것이 엄청난 시간 절약이 되었습니다.
(근데 그 중 몇개는 화면까지 잘라내서 그냥 새로 이미지 생성했습니다;;)
과정 중에 어떤 시행착오를 겪었나요?
처음엔 평범한 판타지 감성으로 시작했다가, 도중에 SF/사이버펑크 감성으로 테마를 전면 수정하는 대공사(가 아니고 이미지만 교체)를 겪었습니다.
또한, NPC 이미지가 전부 투명화 처리가 깔끔하게 되지 않아 체크무늬가 남는 오류가 있었는데, 프롬프트를 완전한 단색 배경(#FFFFFF)으로 강제하도록 수정하고 파이썬 스크립트 오차 범위 를 재조정하여 극복했습니다. (그건 잘했어)
Vercel 배포 시 [URL 잘림 현상]으로 사이트를 못 찾는 작은 해프닝도 있었습니다.
앞으로의 계획이 있다면 들려주세요.
지금은 저(주민대표 1명)만 해금되어 있고 나머지 9가지의 직무(분석가, AI조련사, 배포용사 등)는 '잠금' 상태로 두어서, 인사담당자가 제게 면접을 요청해야만 해금할 수 있다는 컨셉으로 만들었습니다.(사실 그런 컨셉이라기보단 그냥 NPC 준비가 덜 되어서 그렇습니다.)
