이번 편에서 할 것
지난 편에서 프로젝트를 만들었다면, 이번 편에서는 실제 랜딩페이지처럼 보이도록 화면을 구성해볼 거예요. Claude Code에게 '이런 모양으로 만들어줘'라고 요청하는 것만으로 각 영역을 하나씩 완성해 나갈 거예요. 코드를 직접 쓰지 않아도 돼요. 대화만 잘 하면 돼요!
단계별 실습
① 랜딩페이지 구조 먼저 설계하기
본격적으로 화면을 만들기 전에 페이지 전체 구조를 먼저 정해볼게요. 랜딩페이지는 보통 이런 순서로 구성돼요. 첫 화면(방문자의 시선을 끄는 핵심 문구와 버튼) → 서비스 장점 소개(카드 형태로 3~4가지 강점 정리) → 후기 또는 신뢰 요소 → 마지막 행동 유도 버튼(지금 시작하기 등). 이 흐름을 Claude Code에게 알려주면, 전체 구조를 한 번에 잡아줄 수도 있어요.
랜딩페이지를 만들려고 해. 첫 화면 → 장점 소개 → 후기 → 행동 유도 버튼 순서로 구조를 잡아줘. 각 영역을 컴포넌트(화면 조각)로 분리해서 만들어줘.② 첫 화면 영역 만들기
첫 화면은 방문자가 페이지에 들어왔을 때 가장 처음 보이는 영역이에요. 여기서 '이 서비스가 뭔지', '왜 써야 하는지'를 한눈에 전달해야 해요. 강한 한 줄 소개 문구와 '지금 시작하기' 같은 행동 유도 버튼을 크고 눈에 띄게 배치해요. Claude Code에게 서비스 이름과 핵심 문구를 알려주면, 깔끔한 레이아웃으로 만들어줄 거예요.
세련된 SaaS 스타일의 첫 화면 영역을 만들어줘. 핵심 소개 문구는 크고 굵게, 아래에는 '지금 시작하기'와 '더 알아보기' 버튼을 나란히 배치해줘.③ 장점 소개 영역 추가하기
서비스의 핵심 장점을 카드 형태로 나란히 보여주는 영역이에요. 보통 3~4개 항목을 가로로 늘어놓는 구성을 많이 써요. 아이콘과 짧은 설명을 함께 넣으면 훨씬 보기 좋아요. Claude Code에게 '장점 3가지를 카드 형태로 만들어줘'라고 요청해보세요.
3개의 장점 카드가 가로로 나란히 보이는 영역을 만들어줘. 각 카드에는 아이콘, 제목, 짧은 설명이 들어가게 해줘. 깔끔하고 현대적인 스타일로 만들어줘.④ 모바일에서도 잘 보이게 다듬기
요즘은 스마트폰으로 페이지를 보는 사람이 더 많아요. 화면 크기에 따라 레이아웃이 자동으로 맞춰지는 반응형 디자인을 적용해야 해요. 예를 들어 PC에서 3열로 보이던 카드가, 스마트폰에서는 1열로 세로로 쌓이도록 바뀌는 방식이에요. Claude Code에게 '모바일에서도 잘 보이게 수정해줘'라고 하면 자동으로 처리해줘요.
지금 만든 페이지가 스마트폰에서도 잘 보이게 수정해줘. 작은 화면에서는 카드가 한 줄씩 보이도록 바꿔줘.⑤ 전체 흐름 자연스럽게 연결하기
각 영역이 생겼으면 이제 전체 페이지를 위에서 아래로 흘러보면서 어색한 부분을 다듬어요. 영역 사이 간격이 너무 좁거나 넓진 않은지, 색상이 통일감 있게 맞는지, 폰트 크기가 읽기 편한지를 확인해요. Claude Code에게 '전체적으로 여백이랑 색상 좀 다듬어줘'라고 요청해보세요.
페이지 전체를 훑어보고 여백, 색상, 폰트 크기가 일관되게 정리해줘. 고급스럽고 읽기 편한 느낌으로 마무리해줘.이번 편 완성 확인
- ✓첫 화면 영역(소개 문구 + 버튼)이 완성됐나요?
- ✓장점 소개 카드 영역이 추가됐나요?
- ✓스마트폰에서 열었을 때 레이아웃이 잘 보이나요?
다음 편 예고
다음 편에서는 디보 Starter를 연동해서 팝업·배너·FAQ 같은 운영 기능을 코드 없이 추가해볼 거예요.
