|
|
Design + 읽을 독 해외 디자인 아티클 번역 뉴스레터, 읽는 디자인 디독
같이 읽고 싶은 친구가 떠오른다면
|
|
목차 둥근 모서리는 보기에도 편하고 뇌에도 편하다 - 우리는 둥근 모서리를 신뢰하는 훈련을 받아왔다
- 둥근 모서리와 사용 시기
- 둥근 모서리 코딩하기 : CSS3
- 둥근 모서리 코딩하기 : 오래된 닌자 방식
|
|
|
당신은 둥근 모서리를 거의 모든 곳에서 볼 수 있다. 이제는 필수적으로 업계 표준으로 자리잡고 있다보니, 단순히 트랜드라 치부할 수 없다. 둥근 모서리는 하드웨어 뿐만 아니라 사용자 인터페이스와 웹에서도 찾아볼 수 있는데, 이는 단순히 예뻐서가 아니다. 눈으로 보는 것 이상의 무언가가 있다. 왜 우리는 둥근 모서리를 좋아하는 것일까?
1. 둥근 모서리는 보기에도 편하고 뇌에도 편하다 예리한 모서리의 직사각형을 보는것 보다 둥근 직사각형을 보는 것이 인지 부하가 덜하다. 시각 인지 권위자인 Jürg Nänni 교수는 다음과 같이 말했다.
날카로운 모서리의 직사각형은 크기가 같은 타원보다 실제로 시각적 인지 노력이 좀 더 필요하다. 우리의 ‘fovea-eye’는 원을 기록하는게 훨씬 빠른데, 모서리는 추가적인 신경 이미지 처리가 필요하기 때문에 프로세스를 느려지게 한다.
날카로운 모서리는 사고를 방해한다. 날카로운 모서리를 시각화하기 위하여 우리의 뇌는 A지점을 B지점까지 처리하고 잠시 멈춘 후 B지점에서 C 지점까지 진행한다. 직사각형의 경우에는, 이를 인식하기 위해서 네 개의 계산이 필요하다. 둥근 모서리인 경우에는 절대 갑자기 멈추는 일은 발생하지 않고, 당신의 뇌는 시선이 둥근 모서리를 따라 부드럽게 살필 때 단 한 번만 계산한다. |
|
2. 우리는 둥근 모서리를 신뢰하는 훈련을 받아왔다 1981년, 매킨토시는 아직 초기 개발 단계였다. 레지던트 그래픽의 거장 빌 애트킨슨은 간신히 OS에 적용될 원과 타원을 그려냈고, 그는 그것을 자랑스러워했다. 하지만 매킨토스의 아버지, Steve Jobs에겐 둥근 직사각형이라는 또 다른 긴급한 임무가 있었다. 잡스에게 둥근 직사각형은 친숙했고, 그는 둥근 모서리가 어디에나 존재한다고 주장했다. 잡스는 애트킨스와 함께 걸으며 자신의 요구가 미적인 변덕이 아니라는 것을 보여주었다. 꽤 여러 개의 둥근 물체들, 그리고 ‘주차금지'라는 표지판. 애트킨슨은 확신했다.
곧 애트킨슨은 둥근 직사각형을 빠른 속도로 렌더링하는데 필요한 코드를 개발하는데 성공했다. 버튼과 윈도우 창이 둥근 형태로 바뀌었다. 이것이 매킨토시의 “안전한" 인터페이스를 만드는데 도움이 됐다. 이는 IBM이나 마이크로소프트 제품 모두의 위협적인 아우라와는 반대로 고객들에게 맥은 보다 더 부드럽고, 더 친근하게 사용자를 환영하는 매력을 가지고 있었다.
애플의 유산인 둥근 모서리는 소프트웨어를 넘어 확대된다. 도입 당시, 아이폰은 같은 시기에 다른 휴대폰보다 좀 더 “주머니에 넣을 수 있는" 제품이었다. 마찬가지로, iMac은 당시 표준의 “개인용 컴퓨터" 와 달리 위협적이지 않았다. 맥은 느긋한 친구같은 느낌이었고 PC는 짙은 색 정장을 입은 남자와 같았다
잡스는 알고있었고 애플은 받아들였다. 우리가 날카로운 물체를 싫어하고 피하는 것은 어쩔 수 없다.
|
|
네 살짜리에게 어떤 것을 만지게 할 수 있을까? |
|
|
날카로운 모서리는 “가버려", “날 만지지마" 혹은 “나는 너를 다치게 할 수 있어"라고 말하고, 둥근 모서리는 “나를 잡아도 괜찮다"고 한다. 어렸을때 우리는 나이프나 날카로운 물체로부터 다칠 수 있기 때문에 멀리하도록 훈련받아왔다.
신경과학자들은 우리의 이런 날카로운 모서리에 대한 혐오감을 “회피 반응”이나 “윤곽 편견”이라 부른다. 우리는 그것의 의미적 의미(예:절단에 사용)와 그것이 유발하는 감정(예:위협, 고통, 두려움)을 바탕으로 시각적 대상에 대한 부정적인 편견을 발전시키는 경향이 있다. 현대의 우리의 두뇌는 수천년이나 지났지만, 여전히 이 원초적인 반응을 벗어나지 못하고 있다.
3. 둥근 모서리와 사용 시기 젊은 연령층을 겨냥한 디자인을 하는게 아니라면, 둥근 모서리로 당신의 디자인을 뒤덮는 것은 그리 좋은 생각이 아니다. 둥근 모서리를 활용하는 시점은 사용자가 경험하길 원하는 감정과 제시하고자 하는 정체성에 따라 달려있다.
둥근 모서리는 온기와 신뢰를 떠오르게 한다. 그래서 많은 사람들이 “친근한 직사각형"이라 부른다. 대부분의 행동 유도 버튼들(예: 지금 구매, 회원가입)이 이와 같은 방식으로 디자인되는 이유이다. 이것은 고객들로 하여금 브랜드를 이용할 때 안정감을 느끼게 한다.
|
|
Wufoo의 친근한 홈페이지는 그들과 거래하는데 있어 자신감을 갖게 한다. |
|
|
둥근 모서리는 쉽게 이을 수 있기 때문에 지도나 다이어그램에 좀 더 효과적이다. 앞에서 언급한 것 처럼, 우리 눈의 자연스러운 움직임은 곡선에 익숙하다. 날카로운 모서리가 방향을 바꿀 때 갑작스럽게 당신의 시야 흐름을 방해한다.
4. 둥근 모서리 코딩하기 : CSS3 대부분의 디자이너들이 특히 IE와 같은 제한된 브라우저의 호환성 때문에 CSS3 사용을 피한다. 그럼에도 불구하고 IE 9 이상을 포함한 모든 현대 브라우저에서 이미 작동하는 핵심 CSS3 속성이 있다. 이 중 테두리 반경을 지정하기만 하면 요소에 둥근 모서리를 추가할 수 있다.
|
|
|
테두리 반경은 요즘 대부분의 브라우저에서 지원하는 CSS3의 핵심 요소중 하나이다.
|
|
|
>HTML 박스 마크업은 하나의 div와 두 개의 class로 이루어져 있다. 박스 class는 박스의 크기를 결정하는데 반해, 둥근 클래스(rounded box)는 모서리에 영향을 준다.
|
|
|
>CSS 우리는 둥근 박스를 만들기 위해 Class에 스타일을 입힐 것이다. |
|
기본적으로, 아래 그림과 같이, 상자 모서리에 10픽셀의 4개의 원을 겹치고 넘치는 영역을 잘라낸 것 같은 테두리 반경을 사용한다. ( 데모를 보려면 클릭하세요.) |
|
브라우저가 CSS3 호환성에 서서히 보급되고 있기 때문에, 일부는 단지 실험적인 지원만을 제공하며, 벤더 프리픽스(판독 가능한 접두어를 붙여 해당 브라우저에서 인식할 수 있게 하는 것)를 사용하여 처리할 수 있다. 우리 같은 경우에는, -webkit을 사파리와 크롬에, -moz를 파이어폭스에 사용했다. IE는 고정되지않는 속성을 기준으로 사용한다.
차례대로 하는 것이 중요하다. 항상 고정되지 않은 실제 CSS 속성을 마지막에 배치하자. 이는 마침내 브라우저가 해당 속성에 대해 공식적인 지원을 구현할 때 당신의 코드가 다음에 동작할 것을 보장한다. 일단 브라우저가 이를 지원하게 되면, 실제 속성은 그 위에 있는 실험적인 선언들을 무효화할 것이다.
5. 둥근 모서리 코딩하기 : 오래된 닌자 방식 CSS3가 존재하기 전에 가라테 모서리가 있었다. 디자이너 카일 샤이퍼는 이 기법을 대중화했는데, 대본은 사용하지 않고 오로지 하나의 PNG 이미지만 사용한다.
> 이미지 데모와 같이, 우리는 오렌지색의 둥근 직사각형을 만들 것이다. 10픽셀의 둥근 모서리를 만들기 위해서는, 지름 20 픽셀의 원 이미지를 만들어야 한다. 원은 다음과 같이 컨테이너의 배경과 동일한 색을 가져야 한다.
|
|
> HTML HTML 코드는 CSS3보다 좀 더 복잡하지만, 여전히 매우 간단하다. 여기 우리는 상자 자체를 나타내는 바깥쪽 div를 가지고 있고, 모서리를 나타내는 4개의 안쪽면이 더 있다. 5번째 div는 텍스트를 감싸는 역할을 한다.
|
|
|
NW Class는 상자의 왼쪽 상단 모서리를 나타내고, NE는 오른쪽 상단 모서리를 나타내며, SW와 SE도 마찬가지이다. 우리는 컨테이너의 각 모서리에 Class를 배치하기 위해 CSS를 사용할 것이다.
|
|
당신은 텍스트를 원하는대로 만들기 위해서 추가적인 몇 가지 스타일을 선택적으로 추가할 수 있다.
|
|
그러나, 이 방법의 한계점은 모서리의 바깥 부분이 직사각형 뒤에 나타나는 배경 컨텐츠와 일치해야 한다는 것이다. 만약 데모와 같이 빈 흰 페이지라면 문제가 되지 않는다. 만약 패턴 혹은 또 다른 복잡한 디자인의 배경 이미지를 가지고 있다면, 이것은 대부분 매우 복잡해질 수 있다. 이것이 CSS3 방식이 선호되는 이유이다.
결론 이 아티클이 왜 둥근 모서리가 일시적인 유행이 아니라 보편적인 것인지, 왜 편안하게 다가오는지, 웹 컨텐츠를 디자인할 때 어떻게 사용해야 하는지에 대해 이해하는데 도움이 됐으면 좋겠다. 남용해서 사용하지 않도록 주의가 필요하지만, 디자인에 둥근 직사각형을 활용함으로써 당신의 웹사이트 사용자가 더 편안하고 안전하게 느낄수 있을 것이며, 보다 더 쉽게 시각정보를 처리하게 될 것이다.
|
|
[디독 도네이션 OPEN]
안녕하세요, 디독입니다.
오늘 읽으신 아티클이 마음에 드셨다면, 작은 금액이라도 디독의 서비스 유지를 위해 후원해주시면 감사하겠습니다. :)
카카오뱅크 3333 123 7696 03 (김강령)
*후원해주신 금액은 전액 서비스 운영(메일 발송 솔루션 비용)에 사용됩니다.
*후원자(입금자명) 리스트 기입을 원하지 않으시는 분은 메일로 말씀해주세요.
|
|
후원해주신 분들
김영석, 김혜연, 박철순, 이주임, 임용태, 구보명, 유동현, 성수진, 구재환, 유신애, 이은우, 홍순기, 이도후, 임종헌, 김규범, 김주양, 조용준, 김지연, 김민주, 박지현, 박은지, 이수연, 조은하, 박상욱, 김하연, 임주희, 홍기현, 하현우, 송지은, 고애리, 유가은, 박주현 외 17분
후원해주신 분들, 정말 감사합니다! 서비스 유지에 큰 도움이 되었습니다 ;)
|
|
[2019.08.02]웹 컨텐츠의 성격에 따라 적절한 버튼을 사용하는데 도움이 되는 아티클이라 소개해드립니다. 모양과 위치를 디자인 할 때 무의식적인 시선의 흐름을 고려해야할 경우는 많은 것 같은데요, 지난 4월에 발송드린 'OK 버튼은 왜 오른쪽에 있을까?' 도 다시 한번 더 공유드립니다.
* 발행 시간이 하루 늦어진 점 죄송합니다.
|
|
|
피드백은 d.dok.newsletter@gmail.com 으로 남겨주세요. 추천하고 싶은 영문 아티클 역시 링크를 남겨주시면 검토 후 번역하여 보내드립니다.
|
|
|
