이 부분, 뭐라고 부르죠? · 랜딩페이지 해부도
mouseco 홈페이지의 요소 이름과 입자 애니메이션 기법을 익히고, 여백·행간·밀도·속도를 직접 조정하며 수정 요청 문장을 복사하세요.
결과물 먼저 보기
직접 만든 예시
요소를 눌러 이름 찾기 · 직접 조정해 보기출처 · mouseco 홈페이지 기반 · 2026-10-19 · 학습용 재구성 ↗- Header · 헤더 / Hero · 히어로
- 페이지 상단 탐색 영역과 핵심 메시지를 전하는 첫 소개 영역
- Headline · 헤드라인 / Eyebrow · 아이브로
- 핵심 제목과 그 위에서 주제를 알려 주는 짧은 문구
- CTA group · 행동 버튼 묶음
- 주요 CTA와 보조 CTA를 함께 배치한 영역
- Padding / Margin / Gap
- 안쪽 여백 / 바깥 여백 / 요소 사이 간격
- Line-height / Letter-spacing
- 글줄의 높이인 행간 / 글자 사이 간격인 자간
- Container / Breakpoint
- 콘텐츠 폭을 관리하는 영역 / 반응형 배치가 바뀌는 기준
- Particle system / Stroke reveal / Floating motion
- 입자로 형태 만들기 / 경로를 따라 선이 그려지는 등장 / 떠다니는 반복 모션
- Dispersion / Pointer repulsion
- 입자가 흩어지는 전환 / 커서 가까이의 입자가 밀려나는 반응
프롬프트 문구
빈칸을 내 상황에 맞게 채워 사용하세요.
입력과 결과 비교
결과물 예시
설명용 예시입력 mouseco 홈페이지의 실제 문구·로고·입자 그래픽과 섹션 구성
18개 화면 요소와 7개 애니메이션 조정 항목을 선택하는 해부도. 입자 밀도·크기, 부유 속도·이동 폭, 선이 그려지는 등장, 흩어지는 전환, 커서 반발 효과를 직접 비교합니다.
활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.
유용하다고 판단한 이유
좋은 초안이 나와도 “저 부분을 조금만 바꿔줘”로는 수정 범위가 모호합니다. 요소 이름과 속성을 함께 알면 바꾸려는 곳을 짚고 나머지 디자인은 유지하도록 요청할 수 있습니다.
mouseco 홈페이지를 학습용으로 재구성했습니다. 홈페이지의 입자 렌더러에 실습용 조절 기능을 추가했으며, 여기서 바꾼 값은 실제 홈에 반영되지 않습니다. 원출처 ↗
기존 가이드와 자세한 사용법 읽기
목차
이 부분, 뭐라고 부르죠? · 랜딩페이지 해부도
좋은 스킬로 첫 화면을 잘 만들어도, 마지막에는 작은 수정을 반복합니다. 그런데 이름을 모르면 “위쪽 글자 밑에 있는 버튼들 사이를 조금만 벌려줘”처럼 설명이 길어집니다. 요소 이름과 조정 속성을 알면 훨씬 짧고 정확하게 말할 수 있습니다.
화면을 누르면 이름이 보입니다
실제 mouseco 홈페이지를 예로 들어 18개 요소 이름표를 붙였습니다. 로고, “생각을 실제로 움직이게.”라는 헤드라인, 최신 기록 읽기·포트폴리오 보기 CTA와 입자 그래픽을 그대로 가져왔습니다. 이름표나 요소를 누르면 한국어·영어 이름, 역할, 헷갈리기 쉬운 개념과 수정 요청 문장이 나옵니다. 설명 패널의 선택창으로도 모든 요소에 접근할 수 있습니다.
행간, 자간, 여백 등의 슬라이더를 움직이면 실제 화면과 요청 문장이 함께 바뀝니다. 값을 찾은 뒤 복사해서 자신의 프로젝트에 맞게 쓰세요. 이름표를 끄거나 좁은 화면으로 바꾸어 결과도 확인할 수 있습니다.
이 화면에서 익힐 이름
| 위치 | 요소 이름 | 어떤 부분인가요 |
|---|---|---|
| 페이지 상단 | Header · 헤더 | 로고와 메뉴가 모인 공통 탐색 영역 |
| 헤더 안 | Wordmark · 워드마크 | 글자로 표현한 브랜드 이름 |
| 헤더 안 | Global navigation · GNB | 주요 영역으로 이동하는 메뉴 |
| 메인 첫 구역 | Hero section · 히어로 | 핵심 메시지와 행동을 제안하는 소개 영역 |
| 제목 위 | Eyebrow · 아이브로 | 주제나 범주를 짚어 주는 짧은 문구 |
| 큰 제목 | Headline · 헤드라인 | 가장 중요한 가치를 전달하는 제목 |
| 제목 아래 | Subheadline · 서브헤드라인 | 제목의 의미를 구체화하는 설명 |
| 버튼 묶음 | CTA group | 주요 행동과 보조 행동을 묶은 영역 |
| 히어로 다음 | Story section · 스토리 섹션 | “직접 만들고, 기록합니다.”로 이야기를 잇는 영역 |
| 히어로 그래픽 | Key visual / Particle graphic | mouseco의 인상을 전달하는 입자형 브랜드 그래픽 |
| 운영자 소개 | About section | 이 공간의 목적과 운영자의 관점을 설명하는 영역 |
| 기록 소개 | Content section / Content card | 개발 기록·경제·AI 브리핑을 모은 구획과 개별 카드 |
| 페이지 하단 | Site index · 사이트 인덱스 | 사이트의 콘텐츠를 주제별로 묶은 탐색 영역 |
“간격”도 위치에 따라 말이 다릅니다
버튼 안쪽을 넓히려면 padding, 설명 문구 위를 띄우려면 margin-top, 버튼끼리 떨어뜨리려면 CTA 그룹의 gap을 말합니다. 행간은 line-height, 자간은 letter-spacing입니다. 같은 “조금 넓혀줘”라도 대상과 속성이 달라집니다.
히어로 헤드라인의 line-height를 1.1로 줄이고, CTA 그룹의 gap을 16px로 맞춰줘. 글자 크기·문구·버튼 내부 padding은 유지해줘. 좁은 화면에서도 줄 겹침과 가로 넘침이 없는지 확인해줘.
입자 애니메이션도 이름으로 요청합니다
히어로의 입자 애니메이션 해부하기를 누르면 같은 그래픽의 밀도·크기·등장·움직임·전환을 비교할 수 있습니다. 작은 미리보기에서도 변경 결과를 확인하고, 일시정지하거나 처음부터 재생할 수 있습니다.
| 기법·속성 | 무엇을 바꾸나요 | 수정 요청 예시 |
|---|---|---|
| Particle system / Density | 형태를 이루는 입자의 양 | 입자 밀도를 기본값의 50%로 줄이고 점 크기는 유지해줘 |
| Particle size | 개별 점의 반지름 | 점의 반지름을 0.7배로 줄이고 밀도는 유지해줘 |
| Floating / Drift speed | 떠다니는 반복 모션의 속도 | 부유 속도를 0.5배로 줄이고 이동 폭은 유지해줘 |
| Motion amplitude | 움직임의 이동 폭 | 이동 폭을 0.6배로 줄이고 속도는 유지해줘 |
| Stroke reveal / Draw-on | 필기 경로를 따라 드러나는 등장 | 로고가 필기 방향을 따라 4초 동안 그려지게 해줘 |
| Particle dispersion / Dissolve | 기존 입자가 흩어지고 흐려지는 전환 | 기존 입자가 바깥으로 퍼지는 전환의 50% 지점을 보여줘 |
| Pointer interaction / Repulsion | 커서 근처 입자의 반발 | 반응 반경 80px는 유지하고 반발 강도를 0.5배로 줄여줘 |
속도와 이동 폭, 입자 수와 점 크기는 서로 다른 속성입니다. “더 부드럽게”만 말하기보다 어느 속성을 얼마나 바꿀지 지정하면 수정 범위가 명확해집니다. 슬라이더의 비율은 이 예제의 기본값을 기준으로 합니다.
이 화면은 Canvas로 입자를 다시 그리는 방식입니다. Stroke reveal은 여기서는 입자의 노출 순서로 구현하며, SVG의 선을 드러내는 구현과는 다릅니다. 흩어짐 슬라이더는 전환의 한 시점을 보여 주는 실습입니다. 실제 홈페이지처럼 스크롤과 자동 연결되지는 않습니다.
기기의 동작 줄이기 설정을 켠 경우 반복 모션과 등장 애니메이션 대신 완성된 정적 형태를 보여 줍니다. 이때도 밀도·크기·흩어짐의 설정값은 직접 비교할 수 있습니다.
왜 유용한가요
한 번에 화면 전체를 다시 만드는 대신 대상 + 속성 + 원하는 변화를 전달할 수 있습니다. “헤드라인의 행간을 1.1로”, “CTA 그룹의 gap을 16px로”처럼 요청하면 어떤 부분을 손대려는지 명확해집니다. 실제 적정값은 글꼴과 화면 폭에 따라 달라지므로 좁은 화면도 함께 확인하세요.
이 예제는 mouseco 홈페이지를 학습용으로 재구성한 화면입니다. 실제 홈의 스크롤 전환 구역은 선택하기 쉽도록 펼쳐 두었고, 기록 카드는 홈페이지의 기본 소개 문구로 표시했습니다. 특정 모델이 위 문구로 생성한 결과를 검증한 것은 아닙니다. 여기서 값을 조정해도 실제 홈페이지는 바뀌지 않습니다.
참고
확인일: 2026-10-19