코드 한 줄 모르는데 랜딩 페이지 만든 썰.txt

"이걸.. 내가?" AX솔루션팀 비개발자가 Claude Code로 실서비스 랜딩을 직접 개발한 이야기
팀스파르타's avatar
Mar 12, 2026
코드 한 줄 모르는데 랜딩 페이지 만든 썰.txt
💻
코드를 모른다는 게 더 이상 개발의 장벽이 될 수 없는 시대가 왔습니다.
AX솔루션팀의 사업개발/Growth 담당자Claude Code 하나로 랜딩 페이지를 직접 만든 과정, 솔직하게 공유합니다!

안녕하세요, AX솔루션팀 차은서입니다!

저는 개발자가 아니에요. 사업개발이랑 Growth를 담당하고 있는데, 어쩌다 보니 랜딩 페이지를 직접 만들게 됐습니다.
어떻게요? Claude Code로요. 이틀 만에요.
notion image

"이거 AI로 개발하면 금방 해요!"

스파르타AX 랜딩페이지가 필요했어요. 근데 개발팀에 요청하기엔 리소스가 없었고, 외주를 주자니 비용도 비용이고 수정사항 생길 때마다 커뮤니케이션하는 것도 일이더라고요.
그때 옆에서 누군가 말했어요.
💬
"그거 AI로 개발하면 금방 해요!"
반은 가스라이팅이었지만... 솔직히 반은 맞는 말이었습니다. 🫠

실제로 어떻게 만들었냐면

방법은 생각보다 단순했어요.
피그마 디자인 시안 이미지를 Claude Code에 던지고 "이 디자인대로 랜딩페이지 만들어줘"라고 했어요. 그랬더니 파일 생성부터 코드 작성, 실행까지 알아서 하더라고요.
그다음은 그냥 눈으로 보면서 피드백 반복이에요.
💬
"여기 간격 좀 더 벌려줘" "이 섹션 순서 바꿔줘" "색상 이거로 맞춰줘" "메뉴 열릴 때 뚝 끊기는 느낌"
사람한테 이렇게 말하면 살짝 욕 먹을 피드백들인데, Claude Code는 찰떡같이 알아듣고 기술적으로 구현해줬어요. CSS도, 이벤트 리스너도, 반응형 처리도 — 제가 그 단어를 몰라도요.
notion image
2일 만에 프론트엔드 view와 애니메이션 효과까지 완성됐어요.
notion image

"모양만 예쁜 것"에서 "실제로 돌아가는 서비스"로

뷰만 만든다고 끝이 아니잖아요. 실서비스로 올리려면 몇 가지가 더 필요했어요.
  • 분석 로그 심기 어떤 로그를 어떻게 심어야 하는지 전혀 몰랐는데, "무슨 로그 심어야 돼?"라고 물어보니 리스트를 뽑아주고 코드까지 구축해줬어요.
  • 이미지 최적화 배포 후 이미지가 계속 깨지는 문제가 생겼어요. "이거 왜 깨지냐"고 했더니 PNG를 WebP로 바꾸면 용량이 70% 줄어든다며 스스로 일괄 변환까지 해줬어요.
  • 자동 배포 "push하고 배포해줘" 한 마디로 자동 배포 파이프라인이 연결됐어요.
notion image
그리고 에러가 나면 어떡하나 걱정이 제일 컸는데, 그냥 에러 메시지를 복붙해서 "이거 왜 이래"라고 하면 원인 진단부터 코드 수정까지 한 번에 해결해줬어요.

쓰면서 배운 팁 4가지

그런데 진짜 재밌었던 건, 기술 용어를 하나도 몰라도 됐다는 거예요. 제가 실제로 쓴 말들이에요.
내가 한 말
Claude Code가 한 일
"너무 짠! 뜨는 느낌이야"
animation duration 늘리고 ease-out 커브 적용
"메뉴 열릴 때 뚝 끊기는 느낌"
햄버거 메뉴에 fadeIn 애니메이션 추가
"모바일에서 글씨가 너무 커"
font-size 반응형으로 조정
"아이폰에서 이메일 복사가 안 돼"
clipboard API 이중 구현
"포트폴리오 슬라이드 너무 빨라"
자동 슬라이드 인터벌 2.5s로 조정
간단한 피드백들인데도, 찰떡같이 알아듣고 기술적으로 구현해줬어요. 같이 작업하면서 느낀 팁 몇 가지를 공유해드릴게요. 1. AI를 위해 AI를 쓰기 내가 원하는 걸 어떻게 설명해야 할지 모르겠을 때, 다른 AI한테 먼저 "이걸 Claude Code가 잘 알아듣게 프롬프팅 해줘"라고 물어봤어요.
2. 어디서 시작해야 할지도 물어봐 "이거 만들려면 뭐가 필요해? 나한테 물어봐"라고 하면 Claude Code가 스스로 필요한 정보를 질문해줘요. 아무것도 몰라도 시작할 수 있어요.
3. 결과가 애매하면 다그쳐보기 "너 이게 만족스러워? 고객 입장에서 설득될 것 같아?"라고 되물으면 스스로 더 고민하면서 개선안을 제안해줘요.
4. 구체적인 수치가 빠른 지름길 "이거 좀 더 키워줘"보다 "5px 올려줘", "색상은 #FA0030"처럼 구체적으로 말할수록 수정이 훨씬 빠르고 정확해요.

해봐야 안다. 그리고 해보면, 생각보다 된다.

notion image
다 알고 시작한 게 아니에요. 부딪히면서 물어보고, 고치고, 배운 거예요.
완벽하게 준비될 때까지 기다릴 필요 없어요. 어디서 어떻게 시작해야 할지도 Claude Code한테 물어봐도 되고요. 그냥 시작하고, 에러 나면 그때 또 물어보면 돼요.

팀스파르타에서는 개발자든 비개발자든 AI로 직접 무언가를 만들어보는 시도들이 계속 이어지고 있어요. 이런 환경에서 함께 일하고 싶으시다면 아래 링크를 확인해주세요!
Share article

팀스파르타 팀블로그