구불구불한 SVG 경로로 사이트를 만드는 방법

그녀가 CSS Tricks에서 사이트article를 만든 방법에 대한 Netlify's million-developers을 보았습니다. 사이트가 어떻게 만들어졌는지 궁금합니다. (Vue 부분은 아니지만 그녀는 사이트의 경로를 코딩했습니다).

어떤 경로?

다음은 모바일 및 데스크톱 보기를 나란히 놓은 것입니다. 저는 한 콘텐츠 세트에서 다른 콘텐츠 세트로 이어지는 구불구불한 경로에 대해 이야기하고 있습니다.



저는 항상 이와 유사한 곡선 요소가 있는 사이트를 만들고 싶었습니다. 그래서 나는 코드를 검사할 기회를 잡았다. 내가 깨달은 것은 내 마음을 사로잡았다 🤯.

이 두 경로가 실제로 다른 SVG라는 것을 알게 되었습니다! 나는 당신이 탐험할 수 있도록 그것들을 펜으로 추출할 수 있었습니다.

Zell Liew( Netlify Million Devs Site Paths )의 펜 보기@zellwk
에 CodePen .

이 간단해 보이는 일이 왜 그렇게 마음을 아프게 하는 걸까요?

내 뇌는 이상한 방식으로 작동합니다. 프런트엔드를 만들 때 항상 모든 브라우저 크기에서 작동하는 하나의 버전을 만들려고 합니다. 결국, 반응형 디자인의 전부였습니다. 그렇죠?

하지만 아니야.

Sarah가 모바일 버전과 데스크톱 버전을 별도로 빌드해도 괜찮다는 것을 보여주었기 때문에 오늘 제 세계관이 산산조각났습니다. 더 이상 복잡한 코드를 만들 필요가 없기 때문에 전체 탐색 영역이 열립니다! 더 많은 자산을 만들기만 하면 됩니다.

물론 더 많은 자산을 만들어야 하는 경우 성능이 문제가 될 수 있습니다. 하지만 이 경우에는 걱정할 필요가 없습니다. 왜요? 어쨌든 SVG는 HTML과 비슷하기 때문입니다. 빠르고 효율적입니다. 성능에 대한 걱정 없이 더 많은 SVG를 만들 수 있습니다.

이것이 제가 디자인에 대해 생각하는 방식을 얼마나 변화시켰는지 말로 표현할 수 없습니다. 앞으로 더 많은 SVG 곡선을 사용하여 웹 사이트를 구축하는 것이 재미있을 것 같습니다.

나는 뭔가를 디자인할 기회를 얻기 위해 기다릴 수 없어🤩.

흥미로웠지만 이해하지 못했던 것

세개.

Sarah가 데스크탑 경로를 숨기기로 결정한 방법

Sarah가 viewbox 속성을 변경하여 데스크톱 경로를 숨긴 것을 확인했습니다.

<!-- Desktop path on Mobile -->
<svg id="timeline" viewBox="0 -500 600 18500"> ... </svg>

<!-- Desktop path on Desktop -->
<svg id="timeline" viewBox="0 -500 2000 8300">... </svg>

display: none를 설정하고 종료하는 것으로 충분하지 않을까요? 🤔.

길의 창조

경로가 다르게 생성된 것을 확인했습니다.

모바일 버전은 stroke로 생성되었습니다.

데스크톱 버전은 fill로 생성되었습니다.

.mobile-path {
    stroke: rgba(23, 132, 126, 0.7);
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 10px;
}

.desktop-path {
  fill: rgb(21, 132, 125);
}

다시 말하지만 Sarah가 두 경로에 대해 동일한 치료를 사용하지 않는 이유를 잘 모르겠습니다. (여기서 일관성과 패턴을 쫓기 위해 내 두뇌가 어떻게 연결되어 있는지 이미 알 수 있습니다).

내 직감은 Sarah가 이것을 지나치게 생각하지 않았다는 것입니다. 그녀는 단순히 디자이너로부터 받은 SVG를 가지고 실행했습니다.

이것은 제가 일을 완벽하게 할 필요가 없다는 또 다른 알림입니다. 때때로 상황이 약간 일관성이 없어도 괜찮습니다. 중요한 것은 작업이 제 시간에 전달되고 좋은 품질을 가지고 있다는 것입니다.

그래서 덜 세련되게 괜찮은 법을 배워야합니다.

경로 색상

내가 이해하지 못한 마지막 한 가지. 다른 경로 색상이 필요한 이유는 무엇입니까? 🤔.

.mobile-path {
    stroke: rgba(23, 132, 126, 0.7);
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 10px;
}

.desktop-path {
  fill: rgb(21, 132, 125);
}

이것은 내 마음을 정말 엉망으로 만듭니다.

이것이 이 기사의 전부입니다. 어떻게든 도움이 되었기를 바랍니다.


읽어 주셔서 감사합니다. 이 기사는 원래 my blog에 게시되었습니다. 더 나은 프런트엔드 개발자가 되는 데 도움이 되는 더 많은 기사를 보려면 my newsletter에 가입하세요.