애플 스타일 홈페이지 만들기: 여백·글꼴·스크롤 효과부터 무료 배포까지 따라 하는 순서

애플 스타일 홈페이지, 무료로 어디까지 되나

잘 만든 사이트를 보면 내 홈페이지는 왜 이렇게 빽빽할까 싶어지죠. 다행히 애플 스타일 홈페이지 만들기에 비싼 장비나 디자인 프로그램은 필요 없어요. 넓은 여백과 큰 제목, 스크롤에 맞춰 나타나는 화면이 핵심인데, 이 세 가지는 HTML과 CSS 기본기만으로 충분히 비슷하게 만들 수 있거든요. 그래서 이 글은 뼈대 정하기부터 무료 배포까지 순서대로 따라 할 수 있게 묶었어요.

애플 스타일 홈페이지 만들기 전에 정할 4가지

바로 코드를 열기보다 뼈대를 먼저 정하는 편이 빨라요. 디자인이 어수선해지는 이유는 대개 섹션마다 색과 글꼴이 조금씩 달라지기 때문이거든요. 아래 네 가지를 종이에 적어 두고 시작하면 중간에 갈아엎을 일이 줄어요.

여백과 글꼴, 이 설정값부터 바꿔 보세요

애플 느낌의 절반은 여백에서 나와요. 본문 폭을 max-width: 980px 정도로 묶어 가운데에 두면, 넓은 모니터에서도 글이 한눈에 들어오는 폭이 유지되거든요. 섹션 사이는 padding: 120px 0처럼 넉넉히 띄우고, 제목은 56px, 본문은 18px로 크기 차이를 크게 벌려 보세요. 이 숫자들은 시작점으로 쓰는 예시값이라 내 화면에 맞춰 조절하면 됩니다.

스크롤하면 나타나는 효과, CSS 몇 줄로 시작

제품 소개 페이지처럼 내릴 때마다 글이 서서히 나타나는 효과는 두 가지로 만들어요. 다만 효과를 많이 넣을수록 페이지가 무거워지니 처음엔 아래 두 개만 써 보세요.

화면이 실제로 어떻게 움직이는지는 글보다 영상이 빨라요. 자세한 과정은 영상에서 확인하세요: 애플 디자인 무료 홈페이지 만들기 (거북이 버프 유튜브)

무료 홈페이지 배포, 깃허브 페이지스 순서

완성한 파일을 인터넷 주소로 열리게 하려면 호스팅이 필요해요. 깃허브 페이지스는 저장소에 올린 HTML 파일을 그대로 웹사이트로 띄워 주는 깃허브 기능이라 서버를 따로 빌리지 않아도 되죠. 사용 조건은 바뀔 수 있으니 아래 참고자료의 공식 문서를 함께 보세요.

애플 디자인 따라 할 때 자주 막히는 지점

그다음으로 흔한 문제는 속도예요. 큰 사진을 원본 그대로 올리면 첫 화면이 늦게 뜨는데, 이때 사진을 WebP로 바꾸고 가로 크기를 줄이면 파일 용량을 크게 덜 수 있어요. 또 PC 화면만 보고 끝내면 폰에서 56px 제목이 어색하게 줄바꿈되기 쉬우니, 브라우저 개발자 도구의 모바일 보기로 꼭 열어 보세요. 움직임 줄이기를 켜 둔 사람을 위해 prefers-reduced-motion 조건에서 애니메이션을 끄는 코드도 넣어 두면 좋아요.

오늘 바로 해볼 첫 단계

처음부터 페이지 전체를 만들려고 하면 지치기 쉬워요. 그래서 오늘은 첫 화면 한 칸만 완성해 보길 권해요. 큰 제목 한 줄과 설명 한 줄, 버튼 하나가 넓은 여백 안에 놓이기만 해도 애플 스타일 홈페이지의 첫인상은 이미 나오거든요.

막히는 부분이 생기면 화면을 보면서 따라 하는 편이 빨라요. 자세한 과정은 영상에서 보세요: 애플 디자인 무료 홈페이지 만들기 영상

자주 묻는 질문

참고자료

• Apple Human Interface Guidelines — 애플이 공개한 디자인 원칙 문서. 여백·글자 위계의 기준을 볼 때 참고
• GitHub Pages 문서 — 깃허브 페이지스 사용 조건, 사이트 만들기, 사용자 지정 도메인 연결 안내
• MDN Intersection Observer API — 스크롤해서 화면에 들어온 요소를 감지하는 방법 설명