이번 편에서 할 것
이번 편에서는 사이트를 실제로 공개하기 전에 꼭 해야 할 마지막 작업들을 진행해볼 거예요. 내 도메인 주소 연결, 스마트폰 화면 확인, 검색 노출 기본 설정까지 완료하면 드디어 진짜 운영 가능한 사이트가 완성돼요. 거의 다 왔어요!
단계별 실습
① 내 도메인 연결하기
도메인은 사이트 주소예요. 예를 들어 'mybrand.com' 같은 주소를 구매하면 아임웹에 연결할 수 있어요. 아임웹은 '설정 → 도메인 연결' 메뉴에서 진행해요. 구매한 도메인 주소를 입력하고 안내에 따라 설정하면 돼요. 도메인을 아직 구매하지 않았다면 가비아(gabia.com)나 후이즈(whois.co.kr)에서 연 1~2만 원대로 구매할 수 있어요.
② 스마트폰 화면 최종 확인하기
실제 방문자 절반 이상은 스마트폰으로 접속해요. 내 도메인으로 접속해서 스마트폰으로 직접 확인해보세요. 글씨가 너무 작거나 버튼이 눌리지 않거나 이미지가 이상하게 잘리는 부분이 없는지 체크해요. 문제가 보이면 Claude Code에게 해당 부분 화면 캡처를 설명하면서 '고쳐줘'라고 요청하면 돼요.
③ 검색 노출(SEO) 기본 설정하기
SEO는 구글·네이버 같은 검색 엔진에서 내 사이트가 잘 찾히도록 하는 설정이에요. 아임웹과 카페24에는 기본 SEO 설정 메뉴가 있어요. 사이트 제목(예: '○○ 브랜드 공식 홈페이지'), 한 줄 소개(검색 결과에 뜨는 설명 문구, 120자 이내), 대표 이미지(SNS 공유 시 보이는 이미지)를 입력해두세요. 이 세 가지만 채워도 기본 검색 노출 준비가 완료돼요.
④ 이미지 용량과 페이지 속도 확인하기
사이트가 느리게 열리면 방문자가 기다리지 않고 떠나버려요. 이미지 파일이 너무 크지 않은지 확인해보세요. 보통 이미지 하나당 500KB 이하면 좋고, 1MB를 넘는 이미지가 있다면 압축해서 다시 올리는 게 좋아요. 무료로 쓸 수 있는 이미지 압축 사이트(squoosh.app)를 이용하면 쉽게 줄일 수 있어요.
⑤ 사이트 공개하고 최종 확인하기
모든 설정이 끝났다면 사이트를 정식으로 공개해요. 아임웹은 편집 화면 상단의 '사이트 공개' 버튼을 누르면 돼요. 공개 후 내 도메인으로 접속해서 PC와 스마트폰 모두 정상으로 보이는지, 버튼이 잘 작동하는지, 디보 기능이 잘 뜨는지 한 번 더 확인해보세요.
⑥ 카페24를 사용하신다면?
이번 시리즈는 아임웹을 기준으로 안내했지만, 카페24를 사용하신다면 코드를 넣는 위치만 다르고 나머지 흐름은 동일해요. 카페24에서 코드를 넣는 위치는 두 곳이에요. 특정 페이지에만 적용할 때는 '디자인 편집 → 스마트 디자인 편집기 → HTML 편집'에서 원하는 영역에 붙여넣으면 되고, 전체 페이지에 공통으로 적용할 때는 '쇼핑몰 설정 → 디자인 설정 → HTML 소스 편집 → 공통 head 영역'에 넣으면 돼요. 디보 연동 코드도 이 공통 head 영역에 넣으면 전체 페이지에 자동 적용돼요.
이번 편 완성 확인
- ✓내 도메인 주소로 접속하면 사이트가 열리나요?
- ✓스마트폰으로 봤을 때 레이아웃이 자연스럽게 보이나요?
- ✓검색 노출 설정(사이트 제목·설명·대표 이미지)을 입력했나요?
다음 편 예고
마지막 편에서는 웹빌더와 순수 코드 방식 중 내 상황에 더 잘 맞는 방식이 무엇인지 정리해볼 거예요.