brunch

매거진 UX UI 디자인

라이킷 132

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Grace Nov 10. 2020

디자이너들이 웹 디자인 시 알아야 하는 것 2

디자인과 졸업전시를 개발+디자인하며 느낀점 2편

4. 긴 글에 대한 정렬을 어떻게 할지 생각해 주세요.

편집 디자인에서 글을 양끝 맞춤을 할 것인지, 끝 흘리기를 할 것인지, 줄 바꿈을 할 때 단어를 흩어지게 할 것인지, 단어를 최대한 유지하며 줄 바꿈을 할 것인지는 매우 중요한 문제다. 웹도 마찬가지이다. 글이 많은 페이지에서는 글의 정렬을 어떻게 할지 디자인 단계에서 신경 써야 한다.

*아래의 영상들은 친구의 작업을 동의를 구하고 테스트로 사용했다.

왼쪽 맞춤 - 단어 흩어지지 않게 처리

왼쪽 맞춤을 하고 단어를 흩어지지 않게 처리할 경우 오른쪽 여백이 불규칙하지만 단어가 흩어지지 않아 읽기가 편하다.

왼쪽 맞춤 - 단어 흩어지게 하기

왼쪽 맞춤을 하고 단어를 흩어지게 할 경우 단어를 흩어 쓰지 않는 것보다 상대적으로 오른쪽 여백은 규칙적이지만 단어가 흩어지는 표현이 좋아 보이지 않을 수 있다.

양끝 맞춤 - 단어 흩어지게 처리

양끝 맞춤을 하고 단어를 흩어지게 할 경우 오른쪽 여백이 일정하지만 웹 자체적으로 양끝을 맞추기 위해 자간 조정을 한다. 자간이 불규칙해진다.

양끝 맞춤 - 단어 흩어지지 않게 처리

양끝 맞춤을 하고 단어를 흩어지지 않게 처리할 경우 웹 자체적으로 단어를 끊지 않기 위해 자간 조정을 더 많이 한다. 위의 예시보다 훨씬 더 자간이 불규칙하다.

개발 피드백을 진행하면서 디자이너들 사이에서 글자 정렬에 호불호가 많이 갈린다는 사실을 알게 되었다. 앞으로 이렇게 글이 많은 페이지의 경우 디자인에 참여하는 디자이너끼리 이야기를 나누면 좋았겠다고 생각되는 요소 중 하나였다.

5. 웹뿐만 아니라 자잘하게 챙겨야 하는 이미지도 제작이 필요해요

웹 반응형 디자인만 만들면 디자인이 끝나는 것이 아니다. 모든 화면의 반응형 페이지뿐만 아니라 자잘하게 신경 써야 하는 이미지가 있다. 미리 보기 창에 나오는 오픈그래프 이미지, 파피콘 이미지, 로딩 중에 띄울 수 있는 로딩 이미지, 검색 결과가 없으면 나타나는 결과 없음 이미지 등...

오픈 그래프 이미지

오픈그래프 이미지는 대표적으로 카카오톡 미리보기에서 볼 수 있다.

파비콘

웹 타이틀 옆에 나오는 파비콘

로딩 이미지

디자인 팀에 속해있었기 때문에 나에게 디자인 권한이 있어서 오픈 그래프, hover style, 검색 과정 화면 등 없는 이미지나 인터렉션 시 스타일이 없는 경우는 따로 요청하지 않고 프런트 구현을 하면서 그때그때 만들어 넣을 수 있어서 시간을 아낄 수 있었다.

하지만 개발자와 협업하는 프로젝트의 경우에는 디자인에서 개발로 넘어가기 전에 클릭 전, 클릭 후, 검색 전 검색 후까지 상세하게 디자인을 진행해서 시안을 넘겨준다.

6. 폰트 크기는 꼭 화면에서 확인해 주세요

핸드폰에서 잘 보이는 폰트 크기와 웹에서 잘 보이는 폰트 크기는 다르다.

구글과 애플은 모바일에서 14px 이상의 글자 크기를 사용하도록 권장하고 있다. 모바일은 웹보다 크기가 작기 때문에 오히려 16px정도로 글자를 키우는게 가독성이 좋은 경우도 있다.

처음 웹 프로젝트를 하는 경우, 보통 스케치나 XD, 피그마에서 디자인의 벨런스를 확인하기 위해 화면을 작게 보면서 디자인을 하기 때문에 폰트가 커지는 경우가 종종 있다.

우리가 웹 뷰에서 보통 보는 사이트 (구글, 네이버 등)은 본문에서 16~14px정도의 크기를 사용한다.

이 글에서 보는 밑의 화면의 텍스트는 꽤 작게 느껴지지만 실제로 네이버를 사용할 때는 작게 느껴지지 않는다.

'오늘 읽을만한 글'이라는 제목에서 14px를 사용하고 있는 네이버의 홈 화면

새로 제작하는 웹사이트가 익숙하고 읽기에 편해 보이려면 글자가 너무 커도 이질적이겠지만 너무 작아서도 안된다. 디자인을 하고나면 실제 서비스화 되는 화면에서 어느정도로 보이는지 꼭 확인하자.

7. 에러 발생 시 어떻게 대처해야 하죠? 에러 화면 신경 쓰기

오류의 종류에 따라 유저가 오류에 대처할 수 있는 방향 알려주기.

우리들은 디자인을 할 때 오류 상황을 중요하게 생각하지 않는 경향이 있다.

이미지 제공: Pablo Stanley https://threader.app/thread/105185900147273184

개발자 : 에러, 사용할 수 없을 경우, 클릭했을 경우, 그리고 활성화되었을 경우의 디자인이 어디 있죠?

디자이너 : 음... 그게 별로 필요하지 않을 것 같은데요?

모든 것이 완벽하게 돌아가는 상황은 이상적이지만 어떤 일이 100% 원하는 방향대로 되기는 힘들다. 어떤 예기치 못한 상황이 생길지 우리는 알 수 없다. 갑자기 서버가 다운될 수도 있고, 내가 어떤 디자이너의 작품을 보고 있는데 그 디자이너가 본인의 작품을 삭제하는 일이 있을 수도 있다. 이런 종류의 오류 상황에 그냥 "에러"라는 페이지를 띄우기만 한다면 페이지를 보는 사람은 아마 당황스러울 것이다. 페이지가 인도하는 방향대로 가봤는데 갑자기 막다른 길에 도달해 버린 것이다. 페이지 설계자들은 이런 경우들을 최대한 막고, 만약 유저가 막다른 길에 도달했다면 친절하게 다른 길로 안내해야 한다.

에러시 유저에게 대처 방향을 알려주지 않았을 경우

웹 페이지는 어떻게 다음 길을 알려줘야 할까? 그것은 에러의 종류에 따라 다르다.

유저가 다른 페이지로 갈 수 있는 404 에러

이 경우에는 해당 경로에 해당하는 화면을 불러오지 못했을 경우 발생한다. 서버에는 에러가 없지만 프런트엔드에서 문제가 발생한 경우다. 졸전 사이트에서 발생할 수 있는 가장 대표적인 예로는 유저가 디자이너의 작품 화면을 들어가자마자 그 디자이너가 본인의 페이지를 지워버린 경우이다. 한 도메인 안에 다른 페이지는 이용할 수 있으므로 뒤로 가서 다른 페이지를 이용해 달라고 안내해야 한다. 이 에러는 뒤에 나오는 서버 에러보다는 덜 위험한 에러다.

유저가 아무것도 하지 못하는 500 에러

이 경우는 서버 등의 문제가 생겨서 유저가 뭐 어떻게 할 수 있는 방향이 없을 때 뜨는 에러 코드이다. 가만히 웹을 담당하는 개발자가 이 상황을 해결하길 기다릴 수밖에 없다. 웹사이트를 총체적으로 이용할 수 없기 때문에 무엇을 하려고 하는 게 아니라 그냥 사이트를 닫고 커피나 한 잔 마시고 오는 게 정신건강에 좋다.

이럴 경우 담당자에게 연락을 달라고 하거나 친절하게 "이건 너의 잘못이 아니니 웹 수정을 조금만 기다려 달라"라는 뉘앙스를 풍기는 것이 필요하다.