corner-shape과 Roundable extensions
스쿼클(Squarcle)
스쿼클(Squarcle)에 대해 아시나요? 애플 기기를 사용하는 사람이라면 친숙한 용어일 텐데요, 정사각형과 원의 중간 형태로 모서리와 측면 전체가 부드러운 곡선으로 이루어진 도형을 말합니다.
위의 사진에서 정사각형과 스쿼클이 겉보기에는 비슷하지만, 두 도형을 겹쳐보면 곡률이 달라 테두리 곳곳에 빨간 부분이 보이는 것을 알 수 있습니다.
Why round corners are more efficient for human consumption에 따르면, 모서리의 각도가 날카로울수록 시각 시스템의 뉴런에서 더 많은 신경 스파이크가 유발됩니다. 즉, 스쿼클은 더 적은 에너지를 소모하면서 본능적으로 편안함을 느끼게 한다고 볼 수 있습니다.
이것이 애플의 아이폰, 맥북 등의 기기, iOS, Android, One UI 등 주요 운영체제의 앱 아이콘, 키보드 모서리 등 많은 곳에서 스쿼클 혹은 superellipse를 적용한 디자인을 쉽게 볼 수 있는 이유라고 생각합니다.
웹과 스쿼클
웹에서 스쿼클을 사용하려는 시도는 꾸준히 이어져 왔습니다. clip-path 속성을 이용하거나, SVG를 활용하는 방법, JavaScript를 통해 동적으로 생성하는 방법 등 여러 해킹 적인 방식이 있었지만, 구현과 유지보수가 번거로웠습니다.
스쿼클을 원하는 수요가 증가하면서 이를 웹 CSS 기본 속성으로 추가하자는 논의가 이어졌고, 2025년 7월 공개된 CSS Borders Level 4에서 corner-shape 속성으로 포함되었습니다. 10월에는 MDN Web Docs에 corner-shape 속성이 추가되었습니다.
Roundable Extension
개인적으로는 스쿼클을 사용하지 않을 이유가 없다고 생각해서, Roundable이라는 이름의 크롬 익스텐션을 만들었습니다. 이 확장을 사용하면 corner-shape를 적용하지 않은 웹사이트에서도, 마치 개발자가 직접 해당 속성을 추가한 것처럼 다양한 코너 형태를 바로 적용해 볼 수 있습니다.
덕분에 개발자라면 본인 사이트에 스쿼클을 미리 실험해 보면서 디자인과 구현을 검증할 수 있습니다. 또, 웹을 탐색하는 히치하이커라면 기존 사이트를 그대로 두고도 더 편안한 코너 형태를 경험해 볼 수 있다고 생각합니다.
- Chrome Web Store: Roundable
- GitHub: ohprettyhak/roundable-extenstions