Softonic

SVG 구분선 생성기

단계 1 / 3
다음

랜딩 페이지는 이제 색상 섹션 사이에 딱딱한 수평 이음매를 두는 일이 드뭅니다, 곡선 웨이브, 기울어진 경사, 삼각형 행을 통해 서로 어우러집니다. 이들 모두 간단한 SVG 형태입니다: 페이지 너비에 맞춘 viewBox, 다음 섹션의 배경색으로 채운 폴리곤이나 패스를 나가는 섹션 하단에 고정한 것이죠. 이 생성기는 그 형태를 다섯 가지 스타일(웨이브, 곡선, 경사, 삼각형, 계단)로, 필요한 너비·높이·색상·세로 뒤집기와 함께 만듭니다.

섹션 구분선을 만드는 방법

  1. 1

    스타일 선택

    웨이브(S 곡선), 곡선(단일 아치), 경사(대각선), 삼각형(지그재그), 계단(단계형).

  2. 2

    너비와 높이 설정

    너비 = 페이지 너비(1200-1920). 높이 = 구분선의 높이(보통 50-200px).

  3. 3

    채움 선택

    구분선이 매끄럽게 어우러지도록 다음 섹션의 배경색을 고릅니다.

  4. 4

    세로 뒤집기

    아래가 아니라 위를 향하게 하려면 flipY를 켜서 형태를 반전합니다.

  5. 5

    SVG 복사

    나가는 섹션 하단이나 들어오는 섹션 상단에 붙여 넣으세요. 형태가 뷰포트에 맞춰 늘어나도록 `preserveAspectRatio="none"`(이미 포함됨)을 쓰세요.

다섯 가지 스타일과 사용 시점

스타일 분위기 어디에 어울리나
웨이브 부드럽고 친근함 히어로 → 후기, 파스텔 팔레트
곡선 깔끔하고 우아함 기능 그리드 → CTA, 미니멀 디자인
경사 현대적이고 대담함 어두운 히어로 → 밝은 콘텐츠, 고대비 테마
삼각형 날카롭고 기술적 개발자 도구, SaaS 대시보드
계단 구조적이고 레트로 가격 표, 편집형 레이아웃

마크업에 구분선 넣기

섹션 하단에 두는 전형적인 배치:

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

preserveAspectRatio="none"이 필요한 이유

기본적으로 SVG는 균일하게 확대됩니다. 뷰포트를 가로지르는 구분선은 형태가 가로로 늘어나길 원합니다, 페이지 가운데에 작은 웨이브가 아니라 끝에서 끝까지 하나의 웨이브요. preserveAspectRatio="none"은 렌더러에게 종횡비를 자유롭게 왜곡하라고 지시하며, 이는 구분선에 필요한 바로 그것입니다.

접근성과 SEO

  • 스크린 리더가 장식 형태를 건너뛰도록 래퍼에 aria-hidden="true"를 표시하세요.
  • SVG를 몇 킬로바이트 이하로 유지하세요, 큰 인라인 SVG는 DOM 파싱을 지연시킵니다. 여기 출력물은 1KB을 훨씬 밑돕니다.
  • 구분선에 래스터 이미지는 피하세요. 초광폭 모니터와 레티나 디스플레이에서 픽셀화됩니다.

자주 묻는 질문

꼭 그렇지는 않습니다. SVG의 width 속성은 고유 크기를 정하지만, preserveAspectRatio="none"과 CSS width: 100%를 쓰면 형태가 어떤 컨테이너든 채웁니다. 너비를 1200 같은 깔끔한 숫자로 두면 패스의 숫자를 읽기 쉽습니다.

보통 SVG 요소의 기본 인라인 기준선 때문입니다. 틈을 없애려면 SVG에 display: block(또는 vertical-align: bottom)을 추가하세요.

네. 서로 다른 색상과 불투명도로 두세 개의 구분선을 생성해 쌓으세요. 패럴랙스 느낌을 위해 margin-top이나 CSS transform으로 각각 몇 픽셀씩 어긋나게 하세요.

생성된 SVG는 정적입니다. 움직이는 웨이브를 원하면 래퍼에 CSS transform: translateX() 키프레임을 적용하거나, 두 개를 나란히 놓고 슬라이드하세요.

아니요. 아무것도 저장되지 않습니다, SVG는 매번 현재 폼 값으로 새로 렌더링됩니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

깃발 만들기

여섯 가지 레이아웃, 색상, 텍스트, 기호로 간단한 맞춤 3:2 깃발을 브라우저에서 디자인하세요. SVG 또는 PNG를 내려받거나 브라우저 인쇄 대화상자를 열 수 있습니다.

이 도구는 다른 언어로도 제공됩니다