작은 스튜디오를 위한 원페이지 사이트

배경과 목표

• 첫 화면에서 무엇을 하는 팀인지 한 문장으로 전달하기
• 문의까지 가는 길을 세 번의 스크롤 안에 두기
• 글과 사진만 바꿔도 유지되는 구조 만들기

담당한 일과 작업 과정

1. 읽는 순서부터 정리

   화면을 그리기 전에 문장을 먼저 썼습니다. 소개 → 작업 → 일하는 방식 → 문의 순서로 고정하고, 각 구간에 한 가지 메시지만 두었습니다.

2. 여백을 변수로 관리

   섹션 간격·글자 크기·모서리 반경을 CSS 변수로 묶어 한 곳에서 조정했습니다. 화면이 넓어질 때 글 폭이 끝없이 늘어나지 않도록 본문 최대 너비를 제한했습니다.

3. 이미지 교체를 전제로

   사진 비율을 두 종류로 통일해 어떤 이미지를 넣어도 레이아웃이 흔들리지 않게 했습니다. 비어 있을 때의 모습까지 미리 확인했습니다.

결과물

확인한 것과 배운 점

• 문장을 먼저 쓰고 화면을 그리면 섹션 수가 저절로 줄어든다는 것을 확인했습니다.
• 간격을 변수로 묶어 두면 나중에 비율을 바꾸는 작업이 몇 줄로 끝납니다.

SAMPLE · 공개 링크나 성과 수치는 넣지 않았습니다