디자이너가 묻고 개발자가 답하는 웹 이야기
1.2 웹 디자이너와 마크업 개발자의 작업 환경
적용 범위가 넓지 않은 캠페인 페이지 같은 경우에는 간략하게 표기해도 충분합니다. 하지만 적용 대상 페이지가 많고 규칙을 엄격히 적용해야 하는 경우에 구성 요소가 차지하는 공간의 크기, 요소의 크기, 글자 색, 글자 크기 등을 최대한 상세하게 기술해야 웹 디자이너의 의도가 제대로 전달될 수 있습니다. 색, 크기, 위치와 같은 디자인 스타일은 CSS 코드로 작성행 설정합니다. 마크업 가이드를 보면 ‘소개’ 옆에 ‘Bd | 16px | #666666’
마크업에 논리적 픽셀 사용
디스플레이 기술이 발달하면서 모바일 기기 화면은 해상도가 매우 높아져, 크기는 일반적인 PC 모니터에 비해 매우 작은데도 해상도는 PC 모니터와 거의 비슷합니다. 논리적 1 픽셀은 가로세로 각각 물리적 2픽셀을 사용해 표현됩니다. 이와 같은 논리적 픽셀과 물리적 픽셀의 비율을 기기 픽셀 비율이라 합니다. https://mydevice.io/device
터치 제스처 사용
모바일 기기와 PC와 가장 다른 점은 사용자가 화면에 손가락을 대고 쓸어 넘기는 등 터치 제스처를 이용해 조작한다는 것입니다. 따라서 모바일용 웹 페이지의 마크업 가이드를 작성할 때는 터치 제스처에 대해서도 명시해야 합니다.
마우스 오버 없음
모바일용 웹은 마우스 오버와 같은 상태가 없습니다. 대신 자동으로 사용자가 터치한 영역을 다른 색으로 표시합니다.
2. 텍스트
2.1 글꼴
웹 안전 글꼴
시스템에 설치돼 있는 글꼴을 말하며, 실무에서는 시스템 글꼴, 시스템 폰트라고도 합니다. 다라서 웹 안전 글꼴을 사용해 디자인하면 대부분의 사용자 시스템에서 웹 디자이너의 의도에 가깝게 표현됩니다. 웹 안전 글꼴로는 굴림, 돋움, Arial, Times New Roman 등이 있습니다.
모바일 기본 글꼴
iOS의 한글 글꼴은 Apple SD 산돌고딕 Neo입니다. 이 글꼴의 원형은 ‘Sandoll 고딕Neo1’이라는 웹 디자이너용 상용 글꼴입니다. 포토샵에서 작업할 때 Sandall 고딕 Neo1을 사용하면 비슷한 느낌을 낼 수 있습니다. 안드로이드의 기본 한글 글꼴은 Noto Sans CJK RE이며 제조사에 따라 다른 글꼴을 사용하기도 합니다.
대체 글꼴
웹 페이지에 적용된 글꼴이 사용자의 시스템에 설치돼 있지 않은 경웨 대비해 대체 글꼴(fallback font)과 그 우선순위를 설정할 수 있습니다. 예를 들어 글꼴이 아니므로 사용자가 따로 설치하지 않았다면 나눔고딕이 적용될 수 없습니다. 이때를 대비해 대체 글꼴을 맑은 고딕, 돋움으로 설정하면 나눔고딕이 설치돼 있지 않은 시스템의 브라우저에서는 맑은 고딕이 적용되고 맑은 고딕도 설치돼 있지 않으면 돋움이 적용됩니다.
웹 글꼴
웹 서버에 저장해두고 필요할 때 불러와 사용하는 글꼴을 말합니다. 웹 글꼴을 사용하면 사용자의 시스템에 설치돼 있지 않은 글꼴을 사용해 텍스트를 표현할 수 있습니다. 단, 웹 글꼴을 사용하면 발생하면 여러 문제 때문에 웹 글꼴은 사용하지 않는 것을 권장합니다.
이미지 텍스트
고정된 텍스트라면 포토샵을 사용해서 이미지로 만들기도 합니다. 이 경우 글꼴 종류, 크기, 색 등 텍스트의 모든 스타일을 자유롭게 디자인할 수 있습니다. 그러나 텍스트를 수정하려면 이미지 제작 프로그램에서 수정한 다음 웹에 업데이트해야 하고, 리소스 타입이 이미지 파일이기 때문에 웹 성능에도 부담을 준다는 단점이 있습니다.
2.2 크기와 모양
크기
글자 크기는 일반저긍로 픽셀 단위로 설정합니다. 단, 글자 크기를 13, 15, 17, 19 픽셀로 설정하면 문제가 발생할 수 있습니다.
색
클자의 색과 불투명도를 설정할 수 있으며 투명색을 설정할 수도 있습니다.
굵기
글자 굴기는 일반적으로 보통과 굵게를 사용합니다. CSS 속성값으로는 이 밖에도 ‘더 굵게’, ‘가늘게’, 숫자(100 ~ 900 범위 100의 배수) 등을 입력할 수는 있지만 글꼴이 지원하지 않거나 브라우저가 지원하지 않는 경우 많아 흔히 사용하지 않습니다.
iOS의 기본 한글 글꼴인 Apple SD 산돌고딕 Neo는 다음과 같이 다양한 굵기를 지원하므로 모바일용 웹 페이지에서는 더 세밀하게 글자 굵기를 설정할 수 있습니다. 안드로이드에서 한글 글꼴은 ‘보통’과 ‘굵게’만 사용할 수 있습니다.
단, Apple SD 산돌고딕 Neo는 얇은체를 한글에 적용했을 때 오류가 발생할 수 있습니다.
기울기
글자 기울기는 ‘보통’, ‘이텔릭’, ‘오블리크’로 설정할 수 있습니다. ‘기울임꼴’과 ‘오블리크’는 모두 글자가 기울어지지만 약간의 차이가 있습니다. ‘이텔릭’은 글자를 기울인 상태에서 필기체 느낌이 나게 디자인을 다듬은 것이고 ‘오블리크’는 브라우저가 글자를 15도 기울인 모양으로 보여주는 것입니다.
자간
자간, 즉 글자 사이의 간격을 설정해 모든 글자 사이의 간격을 일정하게 조정할 수 있습니다. 특정 글자 사이의 간격만 조정하는 포토샵의 커닝 기능과는 차이가 있으므로 주의해야 합니다.
단어 간격
단어 간격(Word spacing)을 설정해 단어 사이 공백의 크기를 조절할 수 있습니다. 간격을 좁힐 때는 값을 음수로 설정하고 간격을 넓힐 때는 값을 양수로 설정합니다.
행간
행간(Line Height), 즉 줄 간격을 설정해 글자가 차지하는 공간의 높이를 조절할 수 있습니다. 일반적으로 행간은 글자 크기의 2배 이하로 설정합니다.
줄 긋기
줄 긋기(text decoration)를 설정해 글자의 위, 중간, 아래에 줄을 그을 수 있습니다. 선의 색은 따로 설정할 수 없고 글자 색과 같은 색이 적용됩니다. 또한 선의 위치를 세부적으로 조정할 수 없습니다.
배경 이미지 클리핑 효과
Q1. 꼭 웹 안전 글꼴을 사용해야 하나요?
꼭 그렇지는 않습니다. 단, 웹 안전 글꼴을 사용한다면 대체 글꼴로 표현되는 경우에 대비해야 합니다.
Q2. 웹 글꼴을 사용하면 안되나요?
웹 글꼴은 네트워크 상황에 민감하고 파일 크기가 커 안정적으로 제공하기 어려우므로 사용하지 않는 것이 좋습니다. 웹 사이트를 제작할 때 천편일률적이지 않고 특색 있는 사이트로 만들어 달라며 클라이언트가 흔히 하는 이야기가 웹 글꼴을 사용해 달라는 것입니다. 웹 글꼴은 독특하고 색다른 글꼴이 많아서 웹 디자이너도 웹 글꼴을 사용하고 싶을 때가 많습니다. 또한 웹 글꼴을 사용하면, 사용자의 시스템에 설치돼 있지 않은 글꼴이어도 대체 글꼴로 대체되지 않고 그대로 표현됩니다. 그래서 웹 글꼴을 사용하면 “Q1. 꼭 웹 안전 글꼴을 사용해야 하나요?”(50쪽)에서 이야기한 문제를 신경 쓰지 않고도 독특한 글꼴을 사용해 디자인할 수 있다고 생각하기도 합니다. 그러나 웹 글꼴을 사용하면 여러 문제가 발생할 수 있습니다. 웹 글꼴은 웹 서버에서 글꼴을 불러와서 사용하는 것이므로 네트워크의 영향을 받습니다. 네트워크의 속도가 느리면 웹 글꼴이 적용되기까지 시간이 걸립니다. 이런 경우 처음에는 웹 글꼴 대신 대체 글꼴로 표현됐다가 웹 글꼴이 완전히 로딩되면 웹 글꼴이 적용되는데 이때 화면이 깜빡거리는 것처럼 보입니다. 또한 웹 서비스를 제작할 때 성능은 항상 고민의 대상인데, 웹 글꼴은 글꼴 파일을 추가로 다운로드해야 하므로 웹 페이지의 성능을 떨어뜨리는 요인으로도 꼽히고 있어 성능 면에서도 사용하지 않는 것을 권장합니다. 따라서 꼭 웹 안전 글꼴이 아닌 글꼴을 사용하고 싶다면 해당 텍스트를 이미지로 만들어 디자인의 완성도를 높이는 것도 하나의 방법입니다. 마크업 개발자와 협의해 상황에 따라 적절한 방법을 선택하는 것이 바람직합니다.
Q3. 모바일용 웹 페이지에서 가느다란 글꼴을 사용하면 안 되나요?
iOS는 특정 조건에서 가느다란 한글 글꼴이 제대로 표현되지 않는 오류가 있고 안드로이드에서는 한글 글꼴은 ‘보통’과 ‘굵게’만 사용할 수 있습니다. 따라서 사전에 충분한 테스트를 거쳐서 문제가 없는지 확인 후 가느다란 글꼴을 사용하는 것이 좋습니다.
Q4. 글자 크기를 13px 로 설정하니 이상하게 보여요.
돋움 13, 15, 17, 19 px과 굴림 15, 17, 19 픽셀은 정상적으로 표현되지 않습니다. 나눔글꼴 등 다른 글꼴을 사용할 때도 돋움이 대체 글골로 사용되는 경우를 대비해 크기를 13, 15, 17, 19 픽셀로 설정하지 않는 것이 좋습니다.
Q5 한글과 영문이 섞여 있는 텍스트에서 영문만 색이나 크기를 다르게 할 수 있나요?
고정된 텍스트라면 다르게 디자인할 수 있지만 가변적인 텍스트는 한글과 영문의 조합을 예측할 수 없어 영문에만 별도로 CSS 속성을 지정할 수 없습니다.
Q6. 마크업이 변경될 때 텍스트 위아래 여백이 왜 달라지는 건가요?
마크업에서 행간은 글자와 그 위아래 여백을 포함한 공간의 높이를 말합니다. 따라서 행간을 조절하면 글자의 위아래 여백이 함께 변경됩니다. 디자인을 변경하면서 웹 페이지에 텍스트가 추가되면 디자인 단계에서 예상치 못한 위아래 여백이 마크업 단계에서 추가될 수 있습니다. 웹 디자이너와 마크업 개발자 간 커뮤니케이션 문제를 해결하려면 먼저 브라우저에서 텍스트가 차지하는 물리적 공간을 이해해야 합니다. 실제 마크업 가이드 수정 사례를 예로 왜 이런 일이 생기는지 살펴보겠습니다. 다음은 처음 작성한 마크업 가이드입니다.
Q7. 브라우저의 종류에 따라 위아래 여백이 달라 보여요.
브라우저마다 텍스트 여백을 위아래로 어떻게 나누는지가 다르기 때문에 여백이 다르게 보일 수 있습니다. 따라서 기준 브라우저를 정하고 그에 맞게 디자인해야 합니다. 브라우저 호환이 필요한 경우 마크업 개발자와 협의합니다.
한글과 영문에서 위아래 여백에 차이가 나는 이유는 뭔가요?
영문은 한글과 글꼴, 크기가 같아도 브라우저에서 표현되는 글자 높이가 한글보다 낮기 때문에 여백에 1 ~ 2px 차이가 생길 수 있습니다.
Q9. 가변적인 텍스트 마크업 가이드에는 적당한 값을 넣어두면 안 되나요?
가변적인 텍스트를 디자인할 때에는 텍스트의 최대 길이를 고려해야 하고, 텍스트가 정해진 영역을 벗어나느 경우에 대비해 여백, 줄바꿈 여부, 말줄임표 사용 여부 등을 지정해야 합니다.
Q10. 한글과 영문이 섞여 있는 텍스트의 자간을 -1px로 설정했더니 영문만 겹쳐요.
한글 자간이 넓어서 자간을 -1px로 설정하면 영문이 겹칠 수 있으므로 미리 확인해야 합니다. 고정된 텍스트라면 한글만 자간을 -1px로 설정할 수 있지만 가변적인 텍스트라면 한글에만 다른 디자인을 적용할 수 없습니다.
고정된 텍스트라면 한글만 자간을 -1px로 설정할 수 있지만 가변적인 텍스트라면 한글에만 다른 디자인을 적용할 수 없습니다. 고정된 텍스트라면 마크업 가이드에 한글만 자간을 -1px로 설정하고 영문은 자간을 0으로 설정하도록 명시하는 것이 좋습니다. 가변적인 텍스트라면 한글과 영문에 다른 디자인을 적용할 수 없으므로 자간을 -1px로 설정하지 않는 것이 좋습니다.
Q11. 말줄임표로 인한 공백과 말줄임표의 위치를 맞출 수 없나요?
가변적인 한 줄 텍스트에 말줄임 처리를 하면 생기는 말줄임표는 정확한 위치를 제어할 수 없습니다.
Q12. 텍스트에 커닝 옵션을 적용할 수 없나요?
마크업으로는 텍스트에 커닝 옵션을 적용할 수 없습니다. 반드시 커닝 옵션을 적요하고 싶은 경우 고정된 텍스트라면 이미지로 텍스트를 대체하는 것을 권장합니다.
Q13. 밑줄의 위치와 색, 모양을 조정할 수 있나요?
CSS의 밑줄 속성으로는 밑줄의 유무만 설정할 수 있습니다. 그러나 밑줄과 비슷한 효과를 내는 다른 CSS 속성을 사용하면 위치와 색, 모양을 조정할 수 있습니다.
Q14. 줄이 바뀔 대 단어가 잘리지 않게 할 수 있나요?
줄이 바뀔 때 단어가 잘리지 않게 CSS 속성으로 설정할 수 있습니다.
Q15. 툴팁 도움말 위치나 색을 변경할 수 있나요?
툴팁 도움말은 CSS 속성으로 제어할 수 없습니다. 마크업으로는 툴팁 도움말의 사용 여부와 툴팁 도움말의 내용만으로 설정할 수 있습니다. 툴팁 토움말은 텍스트만 입력해두면 브라우저가 알아서 보여주는 것으로 마크업으로는 위치, 색, 모양 등을 변경할 수 없고 툴팁 도움말 사용 여부와 툴팁 도움말의 내용만 설정할 수 있습니다. 툴팁 도움말은 운영체제나 브라우저마다 모양도 조금씩 다릅니다.
3. 이미지
3.1 이미지 형식
이미지 하나의 크기가 500kb 이하 권장 JPG: 일반적으로 사용하는 이미지 포멧(품질 70%) PNG: 그라데이션과 같이 색을 섬세하게 표현해야 하는 이미지는 손실이 없는 PNG-24형식을 사용합니다.
이미지 스프라이트
3.2 CSS로 만들 수 있는 그래픽 요소
원, 삼각형, 사각형 및 기타 도형
https://css-tricks.com/the-shapes-of-css/
그라데이션
그림자 효과
3.3 배경 이미지
배경색
배경 이미지 위치
배경 이미지 크기
배경 이미지 반복
3.4 섬네일 이미지
3.5 버튼 이미지
Q16. 모바일용 웹 페이지는 왜 이미지를 2배 크기로 만들어야 하나요?
마크업 가이드를 작성할 때 이미지는 물리적 픽셀 기준 크기에 맞게 제작해야 합니다.
Q17. 포토샵의 블렌팅과 같은 효과는 적용할 수 없나요?
블렌딩 효과를 내는 CSS 속성이 있지만 인터넷 익스플로러는 지원하지 않고 아직 많이 사용되지 않아 성능 문제가 있는지 충분히 확인되지 않았으므로 일반적으로 포토샵에서 블렌팅 효과를 적용한 이미지를 사용합니다. 블렌딩 효과를 내는 CSS 속성은 2014년에 발표됐습니다. 따라서 마크업으로 구현할 수 있는 테두리 속성을 사용해 블렌딩 효과를 대체하는 것은 권장합니다. 마크업으로 구현할 수 있는 테두리 속성은 ‘선 스타일’을 참고하세요.
Q18. 블러 효과를 적용할 수 없나요?
CSS3의 Filter 속성으로 블러 효과를 구현할 수는 있지만 성능에 큰 영향을 줍니다. 이미지에 블러 효과를 적용하려면 웹 디자이너가 이미지를 제공해야 하며, 따라서 사용자가 등록하는 이미지에는 블러 효과를 적용할 수 없습니다. CSS3의 Filter 속성을 이용하면 블러 효과를 적용할 수는 있습니다. 하지만 페이지 로딩이 느려지거나 이미지를 불러올 수 없는 등 여러 가지 성능상의 문제가 발생합니다. 또한 인터넷 익스플로러는 Filter 속성을 지원하지 않습니다. 따라서 filter 속성을 사용하지 않는 것을 권장합니다. 블러 효과를 적용하고 싶다면 웹 디자이너가 블러 효과를 적용한 이미지를 제공해야 하며, 사용자가 등록하는 이미지에서는 블러 효과를 적용할 수 없습니다.
Q19. 이미지 모서리를 둥글게 만들거나 동그란 이미지를 만들 수 있나요?
CSS3의 border-radius 속성을 사용하면 이미지 모서리를 둥글게 만들거나 동그란 이미지를 만들 수 있다.
Q20. 마스크 효과를 적용할 수 있나요?
CSS의 mask 속성을 사용할 수 있으나 표준 속성이 아니므로 주로 모바일 웹 페이지에 사용합니다. PC용 웹 페이지에서는 액자 같은 마스크 이미지를 만들어서 사용할 수 있습니다. 마스크 속성을 사용하려면 마크업 가이드와 함께 다음 그림과 같은 마스크 이미지를 준비해야 합니다. 이 마스크 이미지를 적용하면 하트 모양의 영역만큼만 이미지가 보이고 투명한 영역의 이미지는 보이지 않습니다.
4. 선
4.1 선 스타일
선 굵기
픽셀 단위
선 모양
선 색
다 가능하지만 그라데이션 안됨
모서리 모양
Q21. 표의 세로선이 가로선에 의해 끊어진 것처럼 보여요
표 테두리는 브라우저에 따라 상하좌우 설정의 우선순위가 다르므로, 표의 세로선과 가로선 색이 다르면 특정 브라우저에서는 세로선이 가로선에 끊어지거나 가로선이 세로선에 의해 끊어진 것처럼 보일 수 있습니다. 따라서 표를 디자인할 때는 오류처럼 보이지 않도록 세로선과 가로선의 색 대피를 줄이는 것이 좋습니다.
5. 사용자 입력
5.1 폼 요소
폼 요소는 마크업으로 스타일을 설정할 수 있는 부분이 제한돼 있습니다. 그래서 다른 스타일을 적용하기 위해 직접 비슷한 기능을 만들어 사용하거나 이미지를 폼 요소 위에 덮어씌우고 사용하기도 합니다.
입력란(한 줄)
비밀번호 입력란
드롭다운 목록 상자
Q.22 폼 요소를 직접 만들거나 이미지를 폼 요소 위에 덮어씌워서 사용하면 안 되나요?>
가능하지만 개발 및 유지 보수, 웹 접근성 측면에서 단점이 있으므로 사용하지 않을 것을 권장합니다.
Q23. 클릭 영역에 점선이나 파란 선이 안 보이게 할 수 없나요?
링크, 폼 등 사용자 입력 요소에 초점을 두었을 때 이를 시각화해주는 표시는 보이지 않게 설정할 수 있지만 웹 접근성 측면에서 권장하지 않습니다.
Q24. 모바일용 웹 페이지에서 터치 영역 표시를 없앨 수 없나요?
터치 영역 표시를 없앨 수 있지만 사용성을 위해 권장하지는 않습니다.
6. 레이아웃
6.1 고정형/유동형/반응형 레이아웃
고정형 레이아웃
유동형 레이아웃
반응형 레이아웃
6.2 모바일 기기의 세로 모드와 가로 보드
Q25. 모바일용 웹 페이지는 왜 모든 픽셀 단위 숫자를 짝수로 지정해야 하나요?
물리적 픽셀 기준으로 마크업 가이드를 작성하는 경우 픽셀 단위의 모든 숫자를 픽셀 비율의 정수배가 되도록 지정해야 합니다. 웹 페이지를 마크업할 때는 논리적 픽셀을 사용하기 때문에 물리적 1px 단위로 표현하기 어렵습니다.
Q26. 한 영역에 고정 너비와 유동 너비를 섞어서 사용할 수 없나요?
한 영역에 고정 너비와 유동 너비를 섞어서 사용할 수는 없습니다.
Q27. 모바일 화면에서 레이아웃이 틀어져요
다양한 해상도의 화면에서 디자인을 안정적으로 보여주려먼 모바일 기기 화면의 최소 너비를 반드시 고려해야 합니다.