HTML CSS 8일 완성하기 : 4일차 CSS 디자인 가이드라인
힘들었다 ... (내가 듣는 강의는 여기)
심지어 이번에는 직접 코드를 짜는 거보다 설명이 많아서 더 힘들었다 ....
근데 내용 자체는 재미있었다. 디자인 ... 에 천부적인 재능(?)이 없다는 걸 저번에 만들면서 절절하게 느꼈기 때문에(ㅋ)
이런 식으로라도 지식을 집어넣고!! 만들 때 고려하면서 만들면 되겠다 싶었다.
좋은 사이트도 많이 알게 되어서 기쁘다 ^_____^ 오늘은 나름 빨리 기록을 끝낼 수 있을 듯!! 그럼 시작~
디자인은 디자이너만의 일?
디자이너 분이 디자인을 만들어주시고 그걸 내가(개발자) 그대로 구현하고 사용자에게 전해진다.
가 일반적이라고 생각했는데 요즘에는 그렇지도 않다고 한다.
개발을 하는 디자이너도 많아지고, 디자인을 하는 개발자도 많아지는 추세라고.
개발하는 "디자이너"가 아니라 디자인을 하는 "개발자"를 목표로 하고 있기 때문에, 별도의 디자인 프로그램 없이 코드로만 웹사이트를 작성, 빌드, 디자인할 수 있도록 실력을 기르는 게 목표이다. 디자인하는 개발자를 목표로 🤸🏻 달려이~
왜 디자인을 신경 써야 할까?
1. 사용자에게 브랜드, 제품 등에 좋은 이미지를 심어줄 수 있다.
2. 사용자가 이 브랜드, 제품을 신뢰할 수 있게 한다.
3. 브랜드, 상품의 인식 가치를 높여준다.
<-> 반대로, 나쁜 디자인을 한 웹페이지는
이 브랜드(회사)는 자신이 제공하는 상품이나 서비스에 별 관심이 없구나 라는 인상을 심어줄 수 있고,
신뢰는커녕 사용자를 불안하게 하며, 브랜드-상품-서비스를 싸구려로 보이게 한다.
그렇다면 좋은 디자인은 뭘까?
요약하자면 사용자가 이 웹페이지에 들어오고자 했던 목적을 바로 찾을 수 있게 하는 디자인이 좋은 디자인이다!
웹 디자인을 구성하는 10가지 요소
1. 타이포그래피
2. 컬러(색채)
3. 이미지 or 일러스트
4. 아이콘
5. 그림자
6. 테두리 (border-radius)
7. 여백 (white space)
8. 시각적 계층구조(visual hierarchy)
9. 유저 경험 (user experince)
10. 구성 요소 및 레이아웃
총 10가지 요소 중
1~9번까지의 요소를 적용할 때 주의할 점이나 팁 등을 기록해 둔다.
10번은 매우 중요!! 하기 때문에 강의까지 일부러 빼뒀을 정도~ 그건 내일 들을 섹션에서 나오는 듯 싶다.
1. 타이포그래피
타이포그래피는 활자를 배치하는 기술로 사용자가 잘 읽을 수 있을 때 좋은 효과를 낸다.
글자의 아름다움을 살리되 읽기 쉽게 만드는 게 중요한 지점!
📌 타이포그래피는 대표적으로 세리프 serif / 산세리프 san-serif 로 나뉜다.
한국어 폰트로 설명하자면 명조 / 고딕의 차이일까?
세리프는 전통적이고 고전적 형태 인터페이스에 자주 사용되고, 신뢰성을 전달한다.
산세리프는 깔끔하고 단순하며 현대적인 디자인에서 사용한다.
📌 주의사항 (이렇게 하면 더 나은 타이포그래피로 보인다 ^_____^)
✔︎ 폰트는 한 웹페이지에 여러 개 쓸 필요가 없다. 1개 혹은 2개 정도 사용하고, 그 이상으로 가면 어지러워 보일 수 있으니 주의!
✔︎ 웹사이트 개성이나 성격에 맞는 폰트를 사용한다. 가장 메시지를 잘 전달할 수 있는 폰트를 골라보자!
✔︎ 폰트 크기를 고를 때 너무 많은 선택지가 있으면 오히려 어지럽고, 나중에 통일도 어려울 수 있다. 어디서부터 어디까지. 크기의 제한을 두고 골라보자.
✔︎ 텍스트 크기
- 일반 텍스트 : 16-32px
- 긴 텍스트 : 20px 혹은 그것보다 좀 더 크게
- 헤드라인 등 메인, 주제 텍스트 : 50px 이상 font-weight도 600 이상
✔︎ font-weight를 400 이하로 잡지 말자. 너무 가늘어서 읽기 힘들어진다.
✔︎ 한 줄당 약 75자 이하가 보기 좋다.
✔︎ line-height: 1.5~2가 적당
✔︎ 헤드라인이 부자연스러워 보인다면 글자 간격을 줄여보자. (음수도 사용가능)
✔︎ 양쪽정렬은 하지 말자. 긴 텍스트 가운데 정렬X (👈 이 부분이 정말 충격이었다)
✔︎ 팁! 짧은 제목은 대문자, 굵게, 글자 간격 넓히기
📌 무료 웹폰트 참고 사이트
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
Free Fonts! Legit Free & Quality » Font Squirrel
Handpicked free fonts for graphic designers with commercial-use licenses.
www.fontsquirrel.com
2. 컬러(색채)
웹사이트의 성격과 맞는 컬러를 고르는 게 제!!!일!!! 중요하다.
📌 색상 팔레트
어떤 디자인이든 최소 두 종류의 색상이 필요하다.
메인 컬러와 회색 컬러
여기서 회색 컬러는 무조건 리터럴리 회색을 의미하는 게 아니라 어떤 색상의 어두운 버전일 수도 있다.
혹은 한 가지 색상을 추가해서 보조색을 사용해도 된다.
이 보조색은 강조색상으로 사용되곤 한다.
주의할 점은 갑자기 뜬구름 잡는 색을 사용하면 안 된다.
두 가지 (혹은 세 가지) 색상을 선택했다면
선택한 색상의 더 밝은 버전 색상 / 더 어두운 버전 색상을 뽑아 사용한다.
특히 회색 컬러가 중요! 텍스트에 다양한 회색 톤이 사용되기 때문에 꼭 팔레트를 만들어둔다.
📌 주의사항
✔︎ 텍스트가 완전히 검정인 경우는 피한다.
✔︎ (접근성 측면) 너무 가벼운 색상은 사용하지 않는다. 대비도 최소 4 이상의 색상을 고른다.
📌 컬러 참고 사이트
https://yeun.github.io/open-color/
Open Color
Color scheme for UI design
yeun.github.io
https://maketintsandshades.com/#ffffff
Tint and Shade Generator
Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.
maketintsandshades.com
배경색과 글씨 색상 명도 대비 검사
https://coolors.co/contrast-checker/112a46-acc8e5
Color Contrast Checker - Coolors
Calculate the contrast ratio of text and background colors.
coolors.co
3. 이미지
네 가지 유형의 이미지를 사용할 수 있다.
상품사진, 스토리텔링사진, 일러스트레이션, 패턴
어떤 이미지를 사용하든 웹사이트의 메시지, 이야기를 전달하기에 효과적인 이미지를 사용한다는 걸 제일로 생각하자.
📌 주의사항
✔︎ 프로젝트나 서비스에 관련된 이미지만 사용한다.
✔︎ 가능하면 원본을 사용하자. (본인이 찍은 사진이나 사진작가가 찍은 사진 등 ...)
✔︎ 스마트폰 스크린, 고해상도 스크린을 고려해야 한다. 이미지 깨짐 현상 등.
✔︎ 이미지 파일의 용량을 낮춰서 보다 더 빠르게 로드될 수 있도록 압축한다.
✔︎ 나란히 세우는 이미지들의 크기와 비율이 같은지 확인하자.
그 밖에도
전문 모델 사진보다 진짜 사람을 (움직이는듯한, 평범한 사람들) 보여주는 이미지를 사용하는 게 사용자들의 감정을 건드린다.
사진, 패턴, 일러스트를 합쳐서 흥미로운 이미지로 재탄생!
텍스트-이미지 결합의 경우,
글자가 있는 배경은 어둡게 만들기
이미지의 배경이 이어지는 공백스러운 곳에 텍스트 위치하기
텍스트 상자에 불투명도 색상 넣기 등. 여러 가지 방법으로 사용할 수 있다.
📌 이미지 참고 사이트
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
https://undraw.co/illustrations
Illustrations | unDraw
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.
undraw.co
https://www.drawkit.com/product/3d-digital-marketing-illustrations
3D Digital Marketing Illustrations | DrawKit
90 fun and friendly 3D illustrations of digital marketing, seo, online shopping, e-commerce and more
www.drawkit.com
4. 아이콘
무작위 불펌 아이콘은 절대 금지!
무료 아이콘 사이트 등을 이용하자.
혹은 이모지🍔를 사용하는 것도 좋은 방법이다.
중요한 건 여러가지 아이콘 팩을 섞어서 이것저것 사용하지 말 것! 스타일의 통일이 중요하다.
만약 스타일 통일이 되지 않으면 사용자의 주의를 산만하게 하고 콘텐츠에서 멀어지게 한다.
svg, icon font만 사용하고, 아이콘도 마찬가지로 웹페이지 개성에 맞춰 사용해야 한다.
그리고 일관성을 유지해야 한다. 만약 메뉴에 사용한다면, 어떤 메뉴는 아이콘 쓰고 다른 메뉴에는 안 쓰고.. 이런 식으로 하면 안 됨!
꼭 어떤 의미를 담은 그림스러운(?) 아이콘뿐만 아니라 체크포인트 같은 bullet 포인트를 추가하는 것만으로도 시각적 디테일을 더할 수 있다.
📌 그 밖의 주의사항
✔︎ 텍스트에 더 집중하게 하고 싶다면 아이콘 색상 = 폰트 색상을 통일한다.
반대로 관심을 끌고 싶다면 아이콘 색상을 따로 설정한다.
✔︎ 말도 안 되는 아이콘을 써서 사용자를 헷갈리게 하지 말자!
어떤 아이콘을 사용한다면 이걸 왜 쓰는지, 그 이유에 합당하고 적당한 아이콘인지를 꼭 되물을 것
✔︎ (강의자 주관적 의견이라고는 했지만 들어보니 나도 동의해서 써둔다) 원래 설계된 것보다 과도하게 크게 만들지 말 것
svg, icon font를 사용했다면 깨지지는 않지만 선이 자기 혼자 두꺼워질 수 있으므로 주의!
📌 아이콘 참고 사이트
Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
heroicons.com
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
ionic.io
5. 그림자
디자인 각 부분 간의 관계를 파악하는데 도움을 주고, 흥미로운 시각적 디테일이 추가되는 효과를 낸다.
디자인에 3차원을 추가하는 효과로 인터페이스에 깊이를 가지게 해 준다.
박스, 텍스트 모두 그림자를 줄 수 있다!
📌 box-shadow / text-shadow
box-shadow: 0px 20px 30px 0 rgba(0, 0, 0, 0.08);
첫 번째 자리 : 수직 거리 (박스 바로 뒤에서 얼마나 수직으로 이동?
두 번째 자리 : 수평 거리
세 번째 : 숫자가 커질수록 더 번진다
네 번째 (옵션) : 숫자가 커질수록 그림자가 더 커진다
다섯 번째 : 그림자 색상
text-shadow: 0px 20px 30px rgba(0, 0, 0, 0.08);
기본적으로 다 같지만 옵션인 네 번째는 x.
주로 이미지 위에 글자가 있을 때 사용한다.
📌 주의 사항
✔︎ 웹 사이트 개성과 맞지 않는다면 굳이 추가할 필요 없다.
✔︎ 그림자는 조금씩 사용한다. 모든 요소에 넣지 말자!!
모든 요소에 그림자를 넣는 것 = 모든 요소에 그림자를 넣지 않는 것.
그림자는 깊이감을 만들기 위함이다. 많이 넣으면 넣을수록 그 효과는 반비례하다.
✔︎ 크기별 그림자
작은 크기 : 작은 크기 요소에 사용. 강조효과!
중간크기 : 섹션 등 중간 크기 요소에 사용. 둥둥 뜬 느낌. 눈에 띄게 한다
큰 크기 : 팝업, 탐색 창 등. 가장 위에 떠있을 필요가 있는 것들에 사용한다.
✔︎ 언제나 그림자가 검정 계열일 필요는 없다!
6. 테두리
border-radius는 그동안에도 잘 썼던 것이라 반가웠다.
테두리를 동글동글하게 만들어서 재미, 즐거움을 높이고 심각한 느낌을 덜어준다. 활기차고 개구진 느낌!
폰트나 아이콘 이미지에 맞춰서 border-radius 정도를 정한다. 어떤 요소에든 쓸 수 있다.
📌 사각형의 경우 모서리마다 따로따로 정할 수 있다!
border-top-left-radius 식으로 왼쪽 위, 아래 / 오른쪽 위, 아래 따로따로 수치를 정할 수 있다.
7. 여백 (white space)
요소 사이의 공간을 뜻한다.
깔끔, 현대적, 세련적으로 보이게 하고 사용자로 하여금 이해가 더 편하게 되도록 돕는다.
여백을 어느 정도 주었냐에 따라서 웹사이트 내의 서로 다른 정보들이 어떻게 연관되어 있는지 자연스럽게 알 수 있게 된다.
왜냐하면 요소들 사이에 보이지 않는 관계를 만들어내기 때문이다.
📌 주의 사항
✔︎ 구성 요소들 안에는 선보다는 여백을 넣어주는 게 좋다.
✔︎ 기본적으로 함께 속한 요소는 더 가까이 있어야 한다(사이의 여백이 더 적어야 한다).
이를 근접성의 법칙(Law of Proximity)라고 하는데 다른 것과는 무관하다는 걸 사용자가 알 수 있도록 티를 내줘야 한다!
✔︎ 다른 디자인과 맞춰야 한다. 예를 들어 텍스트가 크거나 아이콘, 이미지가 크면 그만큼 여백은 더 필요하다.
✔︎ 팁! 여백을 많이 채운다음 제대로 남을 때까지 조금씩 공간을 줄이는 방법!
8. 시각적 계층구조 (visual hierarchy)
특정 디자인의 어떤 요소가 가장 중요한지 정하고 주의를 끈다.
사용자가 중요한 요소로 이끌기 위해 경로를 지정하고 정의한다.
보다 의미 있는 계층구조를 만들기 위해 위에서 말했던 요소들을 잘 조합해 사용한다!
기본적으로 중요한 요소는 페이지 상단에 배치하는 편이 좋다.
시선은 위에서 아래로 흐르기 때문이다. 여백 공간을 효과적으로 사용할 것! 이 계층구조는 여백이 가장 중요하다!
📌 주의 사항
✔︎ 이미지는 많은 관심을 끌기 때문에 주의해 사용한다.
만약 텍스트를 읽기 원한다면 이미지 사용을 아예 하지 않거나 작은 이미지만을 사용한다.
9. 사용자 경험 (UX)
user experience
Design is not just what it looks like and feels like. Design is how it works.
- 스티브 잡스
ui는 user interface로 시각적인 디자인 - 레이아웃, 개성, 타이포그래피, 컬러, 아이콘 등 ...
ux는 user experience로 이 앱 혹은 웹 사이트가 논리적으로 잘 계획된 것처럼 보이는가, 직관적으로 작동하고 있는가, 사용자들은 이를 사용하며 달성하고자 했던 목표에 실제로 도달했는가 ... 등
ux 디자인에 이미 ui 디자인이 많은 부분을 차지하고 있기 때문에 이 둘을 떼어내 생각할 수는 없다. 뭐는 좋고 뭐는 나쁘고 .. 같은 건 정말 의미 없는 생각이다.
ux 디자인을 효과적으로 만들어 내기 위한 주의사항 및 팁을 기록한다.
📌 주의 사항
✔︎ 복잡한 레이아웃은 ❌
✔︎ 독창성 추구보다는 익숙한 패턴을 사용한다.
✔︎ call to action. 배너, 버튼, 링크 등 사용자의 반응을 유도한다.
이때 사용자가 더 빠르고 쉽게 목표에 도달할 수 있도록 돕는다.
✔︎ 링크에만 파란색 글씨 + 밑줄 효과를 사용한다. (링크가 아닌 텍스트에 쓰면 사용자가 착각할 수 있다)
✔︎ 애니메이션은 마구잡이로 넣어서는 안 되고(전문성하락), 넣더라도 200-500ms 사이의 길이로 한다.
✔︎ 양식(예를 들어 회원가입 양식)을 만들 때에는 작성이 아주 쉽도록 만들어야 한다.
✔︎ 양식이 제출된 후 일어나는 일에 대해서 인터페이스에 명확히 나와야 한다.
(예를들어 이메일이 발송되었습니다. 같은 알림)
✔︎ 특정 행동을 위한 버튼이 있을 경우, 실제로 효과가 생성되는 곳에 있어야 한다.
(예를들어 목록추가 버튼이 목록이 추가되는 곳에 있어야 한다)
✔︎ 메인페이지에 헤드라인은 이 비즈니스, 브랜드, 제품, 이곳이 무엇을 위한 웹페이지인지를 잘 알려주도록 정해야 한다.
✔︎ 불필요한 요소는 삭제한다. 명확한 목적이 없다면 모조리 없애기!
✔︎ 되도록 간단한 단어로 표현하고, 복잡하고 어려운 단어나 전문적인 단어는 지양한다.
전달하려는 메시지에 도움이 되지 않는 내용은 포함시키지 않는다.
✔︎ 텍스트가 길다면 블록을 허물어 버리자. 대문자, 이미지, 따옴표 같은 것들로!
4일 차 후기 🍔
그 밖에도 웹디자인을 항상 찾아보면서 영감을 얻는 방법에 대해 설명해 주었는데...
몇 개의 사이트에서 구경하는데 너무너무너무 재미있다... 나도 저런 웹 사이트를 구현해보고 싶은 마음이 마구마구 샘솟는다.
오늘은 위에서 말한 것처럼 직접 코드를 짜보는 것보다는 디자인에 관한 이론 설명이 많았기 때문에 계속 앉아 듣기는 힘들었으나 ..
한 번도 공부해 본 적 없는 분야라 신기하고 재미있었다. 허허 나도 열심히 연구해서 간지 나는 웹 사이트를 만들어내고 말겠다!!
ui/ux는 어디서 많이 들어봤는데... 정도의 단어였는데 흥미로웠다. 🤔
괜찮은 서적이 있다면 찾아서 읽어봐야겠다.
이제 절대로 밀리지 말아야지. 오늘 두 개나 쓰려니 온몸이 뻐근하다!