조그마한 디테일이 웹사이트의 완성도를 좌우합니다. 이 글은 웹디자인의 디테일을 떨어트리는 사소한 실수를 다루려고 합니다. 아직 디자인 경험이 충분하지 않다면, 웹사이트의 완성도를 높여줄 8가지 체크리스트를 배워보세요

*아래 예시들은 원글 작성자에게 피드백을 요청한 웹 사이트입니다.


1. 템플릿의 부적절한 활용

템플릿은 여러분의 작업시간을 단축해주지만, 디자인의 통일성이 떨어질 수도 있습니다.

템플릿을 사용하면서 생기는 공통적인 문제는 여러분이 준비한 로고와 통일성이 떨어진다는 점입니다. 로고의 컬러가 웹사이트 어디에도 찾을 수 없거나, 사이즈가 안 맞아 엉성해 보이는 경우가 많습니다.


템플릿을 사용했을 때는 반드시 디자이너의 재가공이 필요합니다. 템플릿이 깔끔하더라도 템플릿의 기본 스타일을 쓰지 않길 권합니다.


2. 타이포그래피 대비 이슈



타이포그래피에서 보이는 자주 보이는 문제는 제목과 본문 폰트 차이가 별로 없다는 점입니다. 사이즈와 굵기를 조절한다면 간단하게 해결될 것입니다. 이렇게 가공해주면 사용자들이 순서대로 볼 수 있는 위계가 생길 것입니다.


3. 한 페이지에 똑같이 가공된 UI



위의 예시처럼 한 페이지 비슷한 크기와 색깔을 가지고 있는 CTA(행동유발)버튼이 있다면, 사용자는 헷갈릴 수밖에 없습니다. 가장 좋은 방법은 UI를 최소화하는 것이지만, 그것이 어렵다면 크기나 색상을 다르게 가공해서 차별을 주는 방법이 좋습니다.


4. 그리드와 여백

여백은 적당히 유지하되, 너무 많이 떨어지지 않도록 해야 합니다. 그러므로 애매하면서 어려운 부분이지요. 하지만 간단한 방법으로 정리할 수 있는데요. 첫 번째로 모든 요소가 따로 그룹 지을 수 있는지 확인합니다. 그다음에 그 그룹끼리의 여백이 적당한지 체크하면 어렵지 않을 것입니다.


5. 전문성 없는 문구

문구를 쓰는 것은 어렵지만, 여러분의 의도를 웹으로 정확하게 전달하기 위해서는 필수입니다. 특히 여러분이 어떤 제품을 판매하신다면, 문구가 쉽고 정확한지 지인들에게라도 검수를 받아야 합니다.



6. 가독성 이슈

아무리 문구가 좋더라도 그것을 읽을 수 없다면 무용지물이겠지요. 행간, 폰트, 대비 등 가독성을 위해 하나하나 신경 써야 합니다.

저를 비롯한 작은 글씨를 선호하시는 분들이 있습니다. 하지만 라이브가 되는 다양한 환경을 고려해서 조금 크게 작업할 필요가 있습니다. 이 이슈는 모바일에서 더욱 문제가 되는데요. 모바일 디자인을 하실 때는 테스트 기기에서 보면서 작업하는 것을 권유 드립니다.


7. 일관성 없는 디자인

디자인에서 일관성은 매우 중요합니다. 온라인 콘텐츠에서 오프라인 콘텐츠까지 하나로 묶어주면서, 고객들이 여러분의 브랜드를 인지하는 데 큰 힘을 발휘합니다.

하지만 그전에 여러분의 웹사이트부터 일관성이 잘 지켜졌는지 확인해야 합니다. 로고의 키컬러가 다른 곳에서도 똑같이 적용되었는지요? 요소의 여백이 그때그때 다르지 않나요? 혹은 선의 색상이 매번 다르지 않았나요?

물론 예외의 상황도 있겠지만, 이 부분은 퍼블리셔와 함께 스타일가이드를 잡으면서 소통하면 어느 정도 해결될 것입니다.

8. 유행이 지난 디자인

스큐어모픽 디자인은 유행이 많이 지나버렸습니다. 그라데이션, 그림자, 질감 등 3d 효과로 밀도를 올리기보다는 플랫디자인을 시도해보세요.

아주 뻔한 얘기들이지만 아직도 많은 사이트가 지켜지지 않고 있습니다. 여러분들도 위의 8가지 체크리스트를 가지고 더욱 완성도 있는 웹사이트를 만들어 보세요.


출처: designmodo


by 원숭이 발자국



Posted by slowalk

웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다.





다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구현하는 방법을 디자인의 원리와 요소를 통해 알아보겠습니다.


타이포그래피의 요소, 웹에 적용하기 

Hierarchy(계층)

신문이나 잡지 등의 인쇄 매체에서 텍스트를 보여줄 때는 일련의 계층 구조가 필요합니다. 웹도 마찬가지입니다. 가독성이 좋은 웹페이지는 중요도에 따라 헤더와 서브타이틀, 본문, 링크 등이 시각적으로 구조화되어 시각적으로 안정감을 줍니다. 웹에서의 텍스트 계층은 글꼴의 크기 차이를 두는 것 외에도 굵기, 컬러, 기울임, 폰트 선택 등으로 적용할 수 있습니다. 타이틀과 본문을 구분지어주는 기본적인 역할부터 중요도에 따라 콘텐츠를 나누어 사용자들이 잘 읽을 수 있도록 도와줍니다. 



계층이 명확한 컨텐츠 구조는 사용자가 어디에서부터 어떠한 방식으로 글을 읽어가야 하는지 안내해 줍니다.


 

Contrast(대비)

흰 배경에는 블랙 계열의 컬러를 사용하고 헤드라인과 본문의 텍스트 크기의 차이를 두는 것 모두 대비라는 요소를 적용한 것입니다. 일반적으로 배경과 텍스트 색상의 강한 대비는 가독성을 높여줍니다. 




크기와 컬러의 '대비'는 컨텐츠의 가독성을 높여줍니다.



하지만 지나친 대비는 오히려 사이트의 분위기를 해치고 텍스트 요소간의 결합을 흩뜨리며 가독성을 떨어뜨립니다. 흔히 블랙과 화이트의 강렬한 대비가 가독성을 높여준다고 생각하기 쉽지만, 빛을 내는 스크린에서의 이러한 강한 대비는 오히려 눈에 피로감을 줄 수 있습니다. 때문에 본문의 컬러는 완전한 블랙이 아닌 진한 회색 계열의 컬러를 사용하는 것이 좋습니다. 


컬러 

웹에서의 컬러는 시선을 유도하고 사용자들이 콘텐츠를 그룹화 해 읽을 수 있도록 도와주는 중요한 요소입니다. 전체 사이트의 분위기와 사용자의 행동까지 유도하는 웹에서의 컬러 선택은 그만큼 중요하다고 할 수 있을텐데요, 그렇다면 웹에서의 글꼴 컬러 선택은 어떻게 하는 것이 좋을까요?


1. 텍스트의 가독성을 위해 배경과 글꼴 요소간의 충분한 컬러의 대비를 부여합니다.

2. Less is more - 제한된 컬러의 사용은 콘텐츠를 더욱 돋보이게 해 줍니다.

3. 온,오프라인 컬러 시스템 통일 - 브랜드 로고 및 아이덴티티 컬러를 적용하면 사용자들에게 일관된 시각적 메시지와 통일감을 줄 수 있습니다. 때문에 브랜드에 사용된 컬러 시스템을 토대로 Main, Sub, Point컬러를 텍스트에 조화롭게 적용하는 것이 좋습니다. 



브랜드의 컬러 시스템을 적용한 웹사이트 (http://www.heungkuklife.co.kr/)




크기

텍스트의 역할과 중요도에 따라 달라지는 크기는 어떠한 요소를 강조하거나 그 반대의 경우를 위해 사용됩니다. 강조를 위한 너무 큰 크기의 사이즈도, 너무 작은 사이즈도 시각적인 균형을 깨트립니다. 때문에 보기 좋은 헤드라인과 본문 글꼴의 적당한 크기 차이를 두어 구성하면 시각적 안정감을 돕습니다. 일반적으로 타이틀에 사용되는 글꼴의 크기는18px ~ 32px, 본문에 사용되는 사이즈는 12px~16px 정도이며, 웹에서 잘 읽을 수 있는 최소 폰트의 사이즈는 13px, 0.813em라고 합니다. 



비율(Scale)

우리가 보는 웹페이지에는 다양한 크기의 텍스트가 적용되어 있습니다. 타이틀과 본문 등을 적당한 비율의 크기로 배치한다면 콘텐츠를 더욱 짜임새 있게 구성할 수 있습니다. typescale은 1.618이라는 황금비율을 포함한 다양한 비율을 적용해 폰트 크기를 비교해 볼 수 있는 사이트입니다.

 


http://type-scale.com/



행간(line-height), 자간(letter-spacing)

인쇄물과 마찬가지로 웹에서의 행간과 자간은 본문의 가독성에 중요한 역할을 합니다. 어느 정도의 줄간격은 가독성을 더욱 높여줍니다. 특히 폰트의 크기가 작을수록 자간을, 내용이 많은 문단일수록 행간을 늘여주는 것이 좋습니다. 너무 좁은 줄간격도, 넓은 줄간격도 좋지 않으며 폰트 사이즈의 150%이상의 행간은 읽기 좋은 본문을 만들어줍니다. 

참고글 - 웹디자인에서의 자간과 행간에 관한 고찰 



어떠한 폰트를 선택할까?

Less is More

모든 종류의 시스템폰트를 웹에 적용할 수는 없지만 '돋움체, 굴림체' 등 웹상에서의 폰트 선택이 제한적이었던 과거에 비해 다양한 웹폰트를 사용할 수 있게 되었는데요, 과연 웹페이지에서 많은 웹폰트를 적용한 화려한 디자인이 과연 좋은 디자인일까요? 좋은 웹사이트는 한 가지 폰트로도 위에 언급한 '대비'요소를 통해 크기와 두께, 색상의 변화만으로 사이트 전체에는 시각적 통일성과 안정감을 주고, 사이트의 무게는 더욱 가볍게 만듭니다.



이미 검증받은 폰트 선택, 절반은 성공!

오랜 역사와 대중성 있는 폰트는 그 자체로 가독성과 조형성을 갖추고 있습니다. 명조, 고딕이 들어간 웹폰트가 널리 사용되는 이유 또한 가독성이 높기 때문입니다. 다양한 굵기의 서체를 지원하는 Adobe의 본고딕 또한 깔끔하고 뛰어난 가독성 때문에 많은 사이트에서 이용되고 있습니다.



타이틀과 본문에 어울리는 폰트 선택.

같은 크기에서 가독성이 더 우수한 폰트가 있을까요? 헤더와 본문 등 각 영역에 어울리는 폰트는 따로 있습니다. 일반적으로 세리프(Serif)글꼴은 본문에 작은 크기로 적용되었을 때 뭉개지는 현상이 있는데요,(예외로, Georgia같은 폰트는 크기가 작을 때 더 좋은 가독성을 보입니다.) 때문에 폰트가 어떤 영역에 적용되는지에 따라 적합한 폰트를 선택해야 합니다.



'명조(Serif)는 본문이 아닌 타이틀에 크게 적용되었을 때 웹에서 더 우수한 가독성을 보입니다.



영문과 한글의 조화 

한글 웹폰트에 비해 영문 웹폰트는 선택 폭이 넓습니다. 한글과 영문을 함께 사용할 때, 한글 웹폰트로도 영문을 쓸 수는 있지만, 사이트의 심미적인 부분을 좀 더 고려한다면 영문 웹폰트를 독립적으로 사용하기도 합니다. 적용 명조체에는 세리프 서체, 고딕체에는 산세리프 서체가 잘 어울립니다. 사이트의 성격과 분위기에 맞는 한글과 영문의 조합은 시각적 통일성을 높입니다.



나눔고딕 + Lato 


나눔명조 + PT Serif 



좋은 타이포그래피는 웹사이트가 전달하는 메시지를 돋보이게 해 주며 명확하게 내용을 전달 해 줍니다. 웹에서의 타이포그
피 활용를 통해 방문자들이 더 머물고 싶은, 즐겨찾는 사이트를 디자인 하는 데 도움이 되길 바랍니다.


출처 : Smashing Magazine, tutsplus, typecast


by 소금쟁이 발자국

 

Posted by slowalk



디자인을 공부하신 분이라면 검은색 명조체가 가독성에 가장 좋다는 것을 알고 있습니다. 물론 웹에서는 좀 다르다는 사실도 알고 있을 텐데요. 많은 디자인 전문가들이 웹에서는 고딕체와 회색 글씨가 가장 읽기 좋고, 심미적으로도 우수하다고 얘기합니다.



이제는 모바일도 고려해야 하는데요. 과연 여러분이 선택한 폰트가 데스크톱에서 잘 보여서, 모바일에서도 적합할까요? 여러분이 반응형 웹디자인을 쓰신다면 이것에 대해 고민해봐야 되지 않을까요?




타이포그래피의 명백한 책무는 '쓰인 정보를 정확히 전달해주는 것'이다.

이것은 어떤 논란의 여지가 있을 수 없으며 절대 무시될 수도 없다.

왜냐하면, 읽기 불편한 인쇄물은 무의미한 생산에 지나지 않기 때문이다.

- 에밀루더


타이포그래피의 책무는 스크린디자인에서도 변하지 않습니다. 아무리 심미성이 좋아도 제대로 읽히지 않으면 빛 좋은 개살구일 뿐이죠. 아쉽게도 웹과 모바일의 타이포그래피의 가독성에 대해 잦은 논쟁이 있습니다. 그리고 모든 상황에 적용할 수 있는 정설도 없는데요.


하지만 여러분의 웹사이트와 모바일 앱 사용자가 읽기에 적합한 폰트를 고를 수 있는 몇 가지 방법이있습니다.



폰트 크기와 글줄 길이


노인이나 저시력자들은 작은 텍스트를 읽기를 힘들어합니다. 눈이 좋은 사람도 작은 글씨를 오래 보면 눈에 피로가 올 수도 있는데요.


웹 브라우저에서 Ctrl+를 눌러 확대해 보면 된다고 말하는 분도 있지만, 어르신이나 저시력자 중에는 이 기능을 모르는 사람이 많습니다. 그리고 알아도 이 기능을 쓰는 것을 귀찮아합니다.


그러기 때문에 데스크톱에서는 본문 기준으로 16pt 폰트보다 더 크고, 한 줄에 50~75글자(영어 기준)를 쓰는 것이 좋습니다.






아래 예시는 100글자가 넘고 더 작은 사이즈르 사용한 경우인데요. 

16pt 이상, 한 줄에 50~75자를 사용한 위의 예시와 비교하면서 읽어보세요.





이 이슈는 모바일에서 더욱 중요합니다. 밝은 스크린에서 작은 타입들은 사용자들에게 두통을 줄 수 있습니다. 모바일은 한 줄에 30~40글자(영어 기준) 정도 쓰는 것이 좋습니다. 아래 예시의 왼쪽은 30~40글자를 사용했으며, 반응형 대응이 안 되어 있는 오른쪽 예시보다 훨씬 읽기 편합니다.







코딩을 하시는 분들에게는 px 단위보다는 다양한 기기에 유동적으로 대응할 수 있는 rem 단위를 추천합니다.





색상


전문가들은 웹, 혹은 모바일 타이포그래피 색상에 대해 의견을 서로 달리하는데요. 크게 2가지로 나눌 수 있습니다.


  • 가독성에서는 색상 대비가 중요하며, 고로 흰색 바탕에 검은색 텍스트가 가장 가독성이 좋다.

  • 너무 큰 색상 대비는 눈이 피로하다. 회색을 쓰는 것이 적합하다.



누가 옳고, 그른지는 판단할 수 없습니다. 왜냐면 사용자의 기기와 사용하는 환경은 천차만별이기 때문입니다. 디자이너가 판단하기에 적당한 색상 대비도 사용자들이 사용하는 스크린에서는 잘 안 보일 수도 있습니다.



특히 모바일에서 볼 때는 색상 대비 이슈가 매우 중요한데요. 외부나 밝은 공간에서 모바일로 접속했을 때 스크린에 반사되는 것 때문에 잘 안 보일 수도 있습니다.




디자이너가 영혼을 담아 디자인했는데, 사용자 환경 때문에 전달이 잘 안 된다면 그런 비극도 없겠죠. 

그래도 최신 스마트폰에서는 밝기를 스스로 조절이 가능해서 다행입니다 :)



WC3 웹 콘텐츠 접근 지침(WC3’s Web Content Accessibility Guidelines)은 좋은 기준이 됩니다. WC3는 최소대비를 저시력자 기준으로 잡아서 명시해놨습니다. 색상 대비를 점검해주는 도구를 가지고 여러분의 디자인을 점검해보세요.


순수 검은색(#000000)은 저처럼 난독증이 심한 사람에게 더 읽기 어려울 수 있습니다. 장시간 보게 되면 눈에 피로를 더 줄 수 있게 때문입니다.


많은 디자이너가 가장 진한 검은색을 #000000가 아닌 #0D0D0D, #0F0F0F, 또는 #141414를 선택한다고 합니다.




이 3가지 색상들이 순수 검은색보다 눈에 피로를 덜 수 있다고 합니다.



여러분이 색상을 선택했을 때는 사용자와 함께 그들이 쓰는 기기와 환경에서 테스트를 해봐야 합니다. 만약 테스트한 사용자들이 읽는 데 문제가 있다면 일반 사용자들도 똑같은 문제를 겪을 것입니다.





명조 vs. 고딕


명조체와 고딕체의 가독성과 효과에 대해서 잘못 알려진 것이 많습니다.


프린트 기반의 디자인에서는 명조체가 가독성과 읽는 속도를 올려준다는 것이 정설이 되었습니다.


하지만 출판인 카스 토마스(Kas Thomas) 씨는 두 폰트 스타일 가독성의 뚜렷한 차이점을 연구했지만, 결론에 이르지 못했는데요(링크). 이 글의 작성자인 한나 알바레즈(Hanna Alvarez) 씨도 비슷한 연구를 했습니다. 그녀는 30명의 사용자들을 그룹을 나눠, 똑같은 웹페이지에 폰트만 다르게 하고, 그들의 읽는 속도와 읽은 내용의 정확성을 측정했습니다.





첫 번째 웹페이지는 서체는 Arial(고딕체) 폰트 크기는 16pt, 두 번째 웹페이지는 Times New Roman (명조체), 17pt입니다.


이 연구 또한 결론에 이르지 못했습니다.

고딕체를 읽은 사용자 그룹이 평균 읽는 속도가 9% 정도 빨랐지만, 그 수치는 중요한 의미를 갖지 않습니다. 게다가 읽은 내용의 정확성은 거의 동일한 수치가 측정되었습니다. (명조체로 읽은 그룹이 1% 높았습니다)


두 그룹의 가장 눈여겨볼 차이는 명조체로 읽은 그룹이 고딕체로 읽은 그룹보다 글이 잘 안 읽어진다는 불만이 두 배 많았습니다. (명조체 6명, 고딕체 3명)



그럼 명조체의 문제는 뭘까요? 크게 두 가지로 얘기할 수 있는데요.


첫 번째, 명조체는 획이 전부 다릅니다. 이런 특성 때문에 난독증이 있는 사람이나, 저시력자가 보기 힘듭니다.


두 번째, 해상도가 낮은 컴퓨터는 명조체의 곡선 영역을 거칠게 표현합니다.



그러면 우리는 스크린 디자인에서 고딕체만 써야 할까요?


당연히 아닙니다. 여러분이 명조체를 쓰고 싶다면 깨끗하고 정확한 폰트를 쓰기 바랍니다.

하단 우측 예시와 같이 힌팅(Hinting)된 폰트를 사용해보세요.







그럼 어떤 폰트가 적합할까요?


여러분이 선택한 폰트가 사용자의 주된 사용자 경험에 영향을 줄 수 있습니다. 어느 공식에 얽매이기보다는 프로젝트 맥락에 맞는 선택을 하시기 바랍니다.



  • 사용자들은 어떤 것을 기대할까?


섬세함, 재미, 간결함 등 여러분이 브랜딩 한 것에 따라 사용자들이 기대하는 스타일도 다릅니다. 웹사이트에 들어왔을 때 어떤 첫인상을 주고 싶은가요?





여러분은 폰트 선택을 통해, 고객들에게 브랜드 이미지를 확고하게 심어줄 수 있습니다.



  • 사용자들은 어떤 환경에서 쓸 것인가?


모바일의 사용은 점점 늘어나고 있습니다. 이제는 당연히 모바일에 맞는 환경을 제공하지 않으면 뒤처질 수밖에 없습니다. 특히 모바일에서는 자신의 OS만 테스트해보고 일반화하기에는 무리가 있습니다. 꼭 사용자들의 기기를 고려하시기 바랍니다.


여러분의 고객들은 지하철 안이나, TV, 혹은 햇빛이 강렬한 야외에서 여러분의 웹사이트를 보고 앱을 사용할 수 있습니다. 우리는 당연히 고객 환경에 맞게 읽기 쉬운 디자인을 제공해야 합니다.



  • 사용자들은 어떤 목적을 달성하려고 하는가?


쇼핑, 교육, 아니면 재미를 얻으려고 하는 것인지 정확히 알 필요가 있습니다.


만약 고객이 여러분의 상품을 빠르게 이해하고 구매하게 하려면, 속독이 가능한 폰트를 선택하세요. 아니면 사용자들이 오랜 시간 동안 콘텐츠를 보길 원한다면, 눈에 피로하지 않은 편안한 폰트를 사용하시기 바랍니다.





여러분 폰트 선택에 피드백 받기


디자인은 디자이너를 위한 것이 아니라, 사용자를 위한 것입니다. 여러분이 폰트 선택을 끝냈다면, 여러분이 공략하고자 하는 시장과 적합한지 테스트해봐야 합니다.


사용자테스트를 통해 당신의 디자인 선택에 사람들이 어떻게 반응하는지 알아야 하며, A/B 테스트를 통해 폰트를 바꿔서 전환율이 올라가는지도 체크를 해봐야 합니다. 여러분의 서비스가 점진적으로 발전하길 원한다면 이 과정을 꾸준히 거쳐야 할 것입니다.




출처: User Testing



원숭이발자국




Posted by slowalk