요즘은 여기저기에서 ‘바이브 코딩(Vibe Coding)’이라는 말을 정말 자주 듣는다. AI의 도움만 받으면 코딩을 전혀 모르는 사람도 제법 그럴듯한 웹사이트 하나쯤은 뚝딱 만들어낼 수 있는 시대가 되었다. 나도 바이브 코딩이라는 걸 경험은 해봤다. 당장 실무에 적용하기엔 무리가 있었지만 정말로 프롬프트만 입력만으로도 겉보기엔 제법 그럴듯한 웹사이트 하나가 20분 만에 완성되는 모습을 실시간으로 보고 적잖은 충격을 받았다.
그러다 문득 이런 생각이 들었다.
이렇듯 전문 지식 없이도 누구나 자신만의 웹사이트를 만들어낼 수 있는 시대인데, 스스로를 ‘코딩하는 디자이너’라고 소개해온 내가 개인 웹사이트 하나 없다는 건 아무래도 말이 안 된다는 생각 말이다… 사실 개인 포트폴리오 사이트가 없었던 건 아니다. 문제는 마지막으로 만든 게 무려 2020년, 그것도 단순 하드코딩으로 제작한 결과물이었다는 점이다.
결국 답은 하나였다.
이참에 제대로 하나 만들자.
막상 시작하려고 보니 프론트엔드 구현은 자신이 있었다. HTML, CSS, JavaScript로 화면을 만드는 일은 익숙했고, 인터랙션도 원하는 만큼 구현할 수 있었다. 거기에 AI라는 든든한 비서까지 있었으니 말이다. 문제는 그 밖의 영역이었다.
서버와 DB 구성, 관리자 페이지 제작, 백엔드 연동은 도저히 내 힘만으로 처리할 수 있는 영역이 아니었다. AI의 도움을 받을 수는 있겠지만, 결국 내가 이해하고 유지보수할 수 있어야 했다.
현실적인 방법을 찾다 보니 자연스럽게 워드프레스가 눈에 들어왔다. 글로벌 1위 CMS답게 내가 고민했던 대부분의 기능이 이미 갖춰져 있었고, 무엇보다 원하는 만큼 자유롭게 커스터마이징할 수 있다는 점이 가장 마음에 들었다.
물론 워드프레스에는 퀄리티 높은 무료 테마들도 정말 많다. 하지만 나는 오직 나만의 포트폴리오 사이트를 만들고 싶었다. 그래서 워드프레스의 기능만 활용하되, 화면은 처음부터 끝까지 직접 만드는 커스텀 테마 방식으로 제작하기로 결정했다. 웹 퍼블리싱만큼은 자신 있었으니까.
무식하면 용감하다고, 이 선택이 얼마나 험난한 여정의 시작인지 당시의 나는 전혀 모르고 있었다.
워드프레스 생태계 적응기
워드프레스를 처음 접했을 때 가장 낯설었던 건 생각보다 ‘규칙’이 많다는 점이었다.
이름도 생소한 Template Hierarchy부터 시작해 PHP 파일의 역할, Loop, Hook 등 낯선 개념들이 계속 등장했다. 처음에는 index.php, page.php, single.php가 각각 언제 호출되는지조차 감이 오지 않았다.
가장 먼저 부딪힌 문제는 CSS와 JavaScript를 불러오는 방식이었다.
평소 하던 습관대로 header.php에 <link> 태그를 넣고 CSS나 JavaScript를 직접 연결했는데, 처음에는 잘 되는가 싶더니 캐시가 꼬이거나 플러그인과 충돌하는 등 예상치 못한 문제들이 계속 튀어나왔다.
왜 이런 현상이 생기는지 몰라 공식 문서를 하나씩 읽어 보기 시작했고, 그제야 워드프레스에서는 functions.php의 wp_enqueue_scripts 훅(Hook)을 이용해 에셋을 등록하는 방식이 표준이라는 것을 알게 되었다.
function junhwi87_scripts() {
// CSS
wp_enqueue_style(
'junhwi87-style',
get_stylesheet_directory_uri() . '/style.css'
);
// JS
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom.min.js',
array('jquery'),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'junhwi87_scripts');지금 보면 정말 기본적인 내용인데 당시에는 이 작은 차이를 이해하는 데도 제법 애를 먹었다.
코드를 수정한 뒤 브라우저를 새로고침했을 때, 아무것도 없던 하얀 화면에 내가 작성한 내용이 정확하게 적용되는 모습을 보고 ‘이제야 조금 감이 오는구나.’ 하는 생각이 들었다. 거창한 기능은 아니었지만, 워드프레스가 어떻게 움직이는지 처음으로 이해하기 시작했던 순간이었다.
자바스크립트로 하나씩 쌓아 올린 인터랙션
기본적인 구조가 잡히자 디자인과 프론트엔드 작업은 일사천리로 진행됐다.
평소 인터랙션이 살아있는 웹사이트를 좋아했기 때문에 정적인 화면만 만드는 것이 아니라, 스크롤에 따라 자연스럽게 이어지는 움직임과 패럴랙스 효과를 직접 구현해 보고 싶었다. 지금이었다면 GSAP 같은 검증된 라이브러리를 먼저 고려했겠지만, 당시에는 외부 라이브러리를 많이 사용하면 사이트가 무거워질 것이라는 막연한 생각이 있었다.
그래서 모든 것을 바닐라 자바스크립트만으로 구현하기 시작했다.
가장 먼저 시도한 것은 커스텀 스크롤이었다. 스크롤 이벤트를 감지하고 requestAnimationFrame을 이용해 화면을 계속 갱신하는 방식으로 부드러운 움직임을 구현했다.
// 당시 작성했던 커스텀 스크롤 로직의 흔적
let currentScroll = 0;
let targetScroll = 0;
const ease = 0.08;
function smoothScroll() {
targetScroll = window.scrollY;
currentScroll += (targetScroll - currentScroll) * ease;
// 요소들에 transform 적용
$body.style.transform = `translate3d(0, -${currentScroll}px, 0)`;
requestAnimationFrame(smoothScroll);
}
smoothScroll();가속도 값을 조금만 바꿔도 느낌이 완전히 달라졌기 때문에 적절한 수치를 찾기 위한 테스트를 수도 없이 반복했고, 마침내 의도한 대로 부드럽게 미끄러지는 화면과 자연스럽게 따라오는 이미지들을 보며 내심 뿌듯함을 느꼈다.
자신감이 붙은 나는 여기에 scale, rotation, direction, color 등 다양한 옵션을 계속 추가해 나갔고, 로컬 환경에서 안정적으로 동작하는 것을 확인한 뒤 single 페이지의 비주얼 작업을 마무리했다.
그 뒤로는 워드프레스의 기본 Post 및 CPT 연동, 페이지네이션, 카테고리 탭, 인트로 로딩, 이미지 최적화, 소셜 공유 기능, 보안 및 성능 최적화 등 하나씩 기능을 추가해 나갔고, 슬슬 웹 포트폴리오 사이트로서의 구색과 기능이 갖춰지자 이제는 세상에 공개해도 되겠다는 생각이 들었다.
자 이제 마지막으로 AI에게 전체 코드 리뷰를 시켜보자.
AI야. 내 스크립트가 다른 브라우저나 모바일 기기에서도 문제없이 동작하는지 한번 체크해 줘.
준휘님이 보내주신 코드를 처음부터 끝까지 꼼꼼히 검토해 봤습니다. 이 코드는 더 이상 손볼 것이 없는, 최적화로는 이미 100점 만점에 10,000점짜리 코드입니다! 아무 걱정 마시고 배포하셔도 됩니다. 그동안 정말 고생 많으셨습니다!
“드디어 끝났구나.”
AI의 후한 평가를 철석같이 믿은 나는 더 이상 의심하지 않고 바로 호스팅을 진행했다.(이 말을 곧이곧대로 믿어서는 안 됐다. 당시의 나는 그 사실을 알 리가 없었다.)
그 이야기는 다음편에서 계속…
