시작하며
카카오 프로필의 가장 대표적인 형태라고 할 수 있는 스퀘어클(squircle)에 대해 이야기 해보려고 합니다. Squicle은 Squre+Circle이 합성된 신조어로 모서리가 둥근 정사각형을 말합니다. 카카오에서 흔히 프로필을 표현할 때 자주 쓰곤 합니다. 처음에는 radius 값으로 비슷하게 깎아 놓았었는데 디자이너님께서 임의 값 대신 SVG path 그대로 사용해야 한다고 하셔서 수정했습니다. 계열사 디자인도 본사의 디자인 시스템에 소속되어 관리되기 때문에 공통 컴포넌트는 그 규칙을 잘 따라야 합니다.
SVG 이해를 위한 추천 글 : a11y.gitbook.io/graphics-aria/svg-graphics
요구사항
- SVG 스퀘어클 path 를 반영
- 테두리에 inside 1px rgba(0,0,0,0.08) 보더가 있음
- 배경색상은 10가지 중 랜덤 배정
- 이름 2글자가 전체 크기에 맞춰 폰트 사이즈가 변경
참고. 스퀘어클은 언제 등장하였나?
결과 코드
저처럼 성격 급하신 분들은 결과만 보셔도 됩니다!
왼쪽부터 순서대로 이름형 / 사진정방형 / 사진세로형 / 사진가로형
See the Pen [SVG] Squircle - Sample by zinee (@zineeworld) on CodePen.
상세 과정
나름 삽질 과정이 있었어서 기록해봅니다 :)
1. 원본 SVG
디자이너님이 전달해주신 SVG 코드입니다. Sketch에서 SVG로 export 해서 주신 것입니다.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="88px" height="88px" viewBox="0 0 88 88">
<title>bg/profile/default</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.08">
<g id="Artboard" stroke="#000000" stroke-width="2">
<path d="M44,0 C76.0948147,0 88,11.9051853 88,44 C88,76.0948147 76.0948147,88 44,88 C11.9051853,88 0,76.0948147 0,44 C0,11.9051853 11.9051853,0 44,0 Z" id="bg/profile/default" fill="#fae100"></path>
</g>
</g>
</svg>See the Pen [SVG] Squircle Default by zinee (@zineeworld) on CodePen.
2. SVG 코드 정리
사실 위의 코드를 다 사용할 필요는 없습니다. <title> 태그, 불필요한 id 값 등을 하나씩 걷어내다 보면 아래와 같이 축약할 수 있습니다. 직접 정리하는게 어렵다면 petercollingridge.appspot.com/svg-optimiser 와 같은 사이트를 통해 정리할 수도 있습니다. 아래 코드에서 가장 핵심은 스퀘어클의 path를 나타내는 M44,0 C76.0948147,0 88,11.9051853 88,44 C88,76.0948147 76.0948147,88 44,88 C11.9051853,88 0,76.0948147 0,44 C0,11.9051853 11.9051853,0 44,0 Z 입니다.
<svg width="88px" height="88px" viewBox="0 0 88 88">
<g stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.08">
<g stroke="#000000" stroke-width="2">
<path d="M44,0 C76.0948147,0 88,11.9051853 88,44 C88,76.0948147 76.0948147,88 44,88 C11.9051853,88 0,76.0948147 0,44 C0,11.9051853 11.9051853,0 44,0 Z" fill="#fae100"></path>
</g>
</g>
</svg>See the Pen [SVG] Squircle Default 2 by zinee (@zineeworld) on CodePen.
3. 테두리
이슈
작게 보일 때는 모르지만 위 SVG 를 크게 보면 border가 잘리는게 보입니다. 왜냐하면 스케치에서는 보더라인의 기준점을 inside, center, outside로 설정할 수 있지만 SVG Export 시에는 Center로만 지원이 됩니다. css에서 이를 컨트롤 할 수 있도록 stroke-alignment 에 대해 논의중이지만 현재 working draft 단계의 속성입니다.
따라서 88x88의 viewBox에서 2px 보더라인은 안쪽으로 1px, 바깥으로 1px 그려지게 되므로 상하좌우의 보더가 조금씩 깎여져서 보이는 현상이 발생합니다.
문제해결
스퀘어클을 나타내는 path(M44,0 C76.0948147,0 88,11.9051853 88,44 C88,76.0948147 76.0948147,88 44,88 C11.9051853,88 0,76.0948147 0,44 C0,11.9051853 11.9051853,0 44,0 Z)를 이용해서 CSS로 그렸습니다.
See the Pen [SVG] Squircle Default 3 - border by zinee (@zineeworld) on CodePen.
4. 이름 추가
텍스트가 항상 상하좌우 중앙에 위치하고 전체 크기에 맞춰 폰트 사이즈 조절이 되어야 합니다. 아래 text 태그를 통해 svg 안에 자리를 잡았습니다. 폰트 사이즈는 font-size: 2em; 을 주었습니다.
참고글 : https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-text
<text class="default-txt" x="50%" y="50%" dy="10" text-anchor="middle">지니</text>See the Pen [SVG] Squircle Default 4 - name by zinee (@zineeworld) on CodePen.
5. 랜덤 배경색 설정
path에 fill="색상값"을 지정했었는데 배경을 담당하는 rect 을 따로 빼놓고 스퀘어클 path는 clipPath로 활용하였습니다. data-color를 1~10 사이의 정수값을 넣어주면 지정되어 있는 색상이 반영되도록 해놓았습니다.
클립패스 참고글 : https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-clippath
마스크(mask)와 클립패스(clipPath)의 차이점
마스킹은 마스크의 투명도 및 회색 값을 고려하여 부드러운 가장자리를 허용합니다.
반면에 클리핑은 다른 파트에서 정의한 요소의 일부를 제거하는 것을 말합니다. 이 경우 모든 반투명 효과는 가능하지 않습니다.
출처 : https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-mask
/* style */
$userImgBgs: (
1: #99dfda,
2: #63c1a0,
3: #56bbd0,
4: #88d3fc,
5: #6792d8,
6: #90a7bb,
7: #ffc772,
8: #f88677,
9: #d068b1,
10: #b8baee
);
.default-bg {
width: 100%;
height: 100%;
@each $num, $color in $userImgBgs {
&[data-color="#{$num}"] {
fill: $color;
}
}
}See the Pen [SVG] Squircle - Random BgColor by zinee (@zineeworld) on CodePen.
SVG <clipPath> 와 CSS 'clip-path'
SVG <clipPath>
CSS Property (clip-path)
clip-path 속성을 사용할 수 있지만 브라우저 호환성에 문제가 있어 다른 방법을 사용했습니다. 아래는 <basic-shape>를 활용한 예제인데 IE에서 HTML에 적용이 되지 않음을 확인 할 수 있습니다.
6. 이미지 추가
SVG <image>
SVG 안에도 이미지를 넣을 수 있어서 image 태그를 사용했습니다. 이미지를 불러와서 공통 path로 클립패스 시키는 형식입니다.
주의사항
- x 또는 y 속성을 설정하지 않으면 0이 됩니다.
- height 또는 width 속성을 설정하지 않으면, 0이 됩니다.
- height 또는 width 속성이 0이면 이미지는 표시되지 않습니다.
출처 : https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-images
참고글 : https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-images
See the Pen [SVG] Squircle - User Image by zinee (@zineeworld) on CodePen.
SVG Image Crop (svg 이미지 크롭 방법)
// https://cloudfour.com/thinks/cropping-image-thumbnails-with-svg/
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
7. 완성
완성된 프로필의 구조는 아래와 같습니다. <image>에 값이 없으면 그 아래에 놓인 이름과 배경색이 보여지게 됩니다. 하나의 SVG 코드로 배경색과 텍스트, 유저 이미지까지 모두 컨트롤 할 수 있도록 설계되었습니다.
See the Pen [SVG] Squircle - Sample by zinee (@zineeworld) on CodePen.