UX / UI 디자이너가 반드시 알아야 할 것들 #2

 

1. 그리드

디자인을 할 때 CSS그리드 시스템을 항상 생각하기.

 

부트스트랩 그리드

Redirecting…

를 참조하세요.

대부분의 일반적인 웹 디자인 그리드를 커버하는 가장 유명한 CSS 프레임워크 입니다. 부트스트랩 그리드는 12개의 columns과 15px 의 inner padding이 기본입니다. 물론 수정할 수 있습니다.

1. 그리드
디자인을 할 때 CSS그리드 시스템을 항상 생각하기.

부트스트랩 그리드를 참조하세요.
대부분의 일반적인 웹 디자인 그리드를 커버하는 가장 유명한 CSS 프레임워크 입니다. 부트스트랩 그리드는 12개의 columns과 15px 의 inner padding이 기본입니다. 물론 수정할 수 있습니다.
부트스트랩 그리드 시스템
zepline.io를 사용한다면 스케치 내부의 그리드 정보도 알 수있습니다. 하지만 .col-sm-2 .col-sm-6같은 CSS언어로 개발자에게 디자인을 설명할 수 있으면 좋습니다.

 

2. 반응형 디자인

브레이크 포인트와 자연스러운 트랜지션 생각하기.

반응형 웹디자인 예시

UX/UI디자이너는 다양한 화면에서 각 디자인 요소들이 어떻게 보이고 변화하는지 표현할 수 있어야 합니다. 모바일, 패드, 웹사이즈의 정지된 디자인으로 충분치 않을때가 많습니다. 트랜지션까지 생각해야 합니다.(모바일 디바이스는 landscape view도 따로 생각해야합니다.) 아래는 자주 잊는 요소들입니다.
* 
각 브레이크 포인트에서 Columns과 컨텐츠는 어떻게 되는가?
* 
각 비율에서 컨테이너 사이즈는 어느정도 되는가? 
* 
반응형 이미지인가? 그렇다면, 사이즈가 충분한가?

(데스크탑에서 200x200으로 표시되는 이미지가 375x667 디바이스에서 100%로 표시된다면, 이미지의 width는 750px이상되어야 뿌옇게 보이지 않는다.)

또 다른 흔한 실수는 min-height과  max-height을 지정하지 않아서 이미지가 컨테이너 사이즈에 따라 지나치게 크거나 작아질 수 있습니다. 아니면 콜룸의 높이가 다르게 보일 수 있습니다.
뷰에 따라서 콜룸높이 체크해보자.
반응형 웹에서 요소가 변화하는 지점을 Break Point라고 하는데, 아래는 일반적인 Break Point들입니다. 이 사이즈들은 꼭 체크를 해봅시다. 물론 모바일은 Landscape view도 체크해야합니다.

 

• 320x568
• 375x667
• 768x1024
• 1024x768
• 1280x768
• 366x768
• 1920x1080

3. 오픈소스 컴퍼넌트 쓰기

모든 요소를 디자인할 필요는 없다.

대부분의 경우, 작은 컴퍼넌트 (데이트 피커, 드롭다운, 셀렉박스 등)는 디자이너가 새로 디자인한게 아닌, 프레임워크가 제공하는 거나 오픈소스중에서 가장 프로젝트에 맞는걸 골라 쓰는 경우가 많습니다.

사소한 부분까지 새로 만들시간이 없고, 찾아보면 오픈소스 중에 괜찮은 디자인도 꽤 많기 때문입니다.
이런 컴퍼넌트에 대한 디자인 욕심은 후반부에 시간이 남을때 하는게 좋습니다. 오픈소스는 모종의 이유로 못/안쓰게 되는 경우가 많기때문에, 미리 커스텀을 하면 디자인이 폐기되는 경우가 많습니다.
jQuery UI Date Picker

4. 애니메이션 & 클릭가능한 프로토타입

말보다는 예시, 예시보다는 시연.

프로토타입은 꼭 만들어보는게 좋습니다. 특히 InVision

Collaborate better | InVision

이나 Principle

Principle

같이 클릭/ 터치를 할수있는 라이브 프로토타이핑을 추천합니다. 트랜지션/애니메이션을 수치로 나타낼 수 있고, 실제로 사용하면 디바이스별로 느낌이 굉장히 다릅니다. 특히 클라이언트나 동료를 설득하는데 가장 좋은 방법입니다.

UI Kit
유아이 키트는 디자인의 버전관리.
UI 키트는 해당 프로젝트에서 사용중인 디자인 엘레트들을 모아놓은 리스트입니다.
디자인 통일성을 유지시키기 위해서 중요한 요소입니다. 큰 프로젝트에서 팀으로 일할때 중요한 역할을 합니다.

 

 

• UX / UI 디자이너가 반드시 알아야 할 것들 #1Reader's universe/SocialNowhere Cafe2022-08-22 20:13
• 선택 안됨
  완성된 디자인이라는 환상, 깃헙/피그마 콜라보레이션 기능Reader's universe/SocialNowhere Cafe2022-08-22 19:58
• 선택 안됨
  UX 디자인 글쓰기, 디자인 툴의 급증, 모션, 플랫폼 다각화 그리고 AIReader's universe/SocialNowhere Cafe2022-08-22 19:49

UX / UI 디자이너가 반드시 알아야 할 것들 #1

완성된 디자인이라는 환상, 깃헙/피그마 콜라보레이션 기능

UX 디자인 글쓰기, 디자인 툴의 급증, 모션, 플랫폼 다각화 그리고 AI

 

 

UI키트에서 컬러, 타이포그래피, 버튼, 인풋과 같은 컴퍼넌트들을 정리합니다. 이미 만들어놓은 요소를 다시 만들지 않아 편하고 다른 디자이너나 개발자에게 전달하기도 좋습니다. 만약 비슷한 버튼을 한 프로젝트에서 두가지로 만들었다면, 키트를 확인하고 하나로 통일하는게 좋습니다.
UI키트를 만들지 않으면 개발자가 아트보드에 나온 그대로 10가지의 버튼 디자인을 할 수도 있습니다. 어떤 에셋을 키트로 만들지 안다면, 변수명으로 지정해놓을 수 있어서 통일된 디자인 변경이 쉽습니다. 실제 업무에서 자주 클라이언트 코드를 바꾸게됩니다.
InVision사의 Craft플러그인의 라이브러리기능. CC라이브러리와 같은 기능을 제공한다.

 

Export
가이드 그리지 마세요.
아래 링크에서 가이드 툴 중 하나를 사용하는걸 추천합니다. 실제 수치와 컬러등 CSS정보를 파일에서 직접 읽어오는 툴입니다. 전 실제 업무에 제플린을 도입하고 효율성이 2배는 향상되었습니다. 디자이너는 가이드를 만들지 않아도 되고, 개발자는 빠진 수치를 일일히 물어보지 않아도 됩니다.
제플린의 사용 화면. 가이드라인에 대한 거의 모든 기능을 제공한다.

오래전 방식의 가이드라인. 손이 많이 간다.

Element states
내가 뭘 하고 있는지 알려주는 요소.
UX / UI를 처음 디자인할 때 흔히 간과하기 쉬운부분입니다. HTML/CSS에서 버튼이나 인풋같은 엘리먼트가 일반적인 상태, 마우스가 호버된 상태, 클릭중인 상태, 포커스된 상태 등을 구분해야 합니다.
UI 키트에 이 요소들을 포함해야합니다.
Element 스타일링에 대한 자세한 사항은 아래의 W3School 문서를 참고하세요.
상태 예시들. 이 상태를 디자인하는게 제품 디테일에 큰 영향을 준다.

Line-height
하나의 정보는 하나의 텍스트영역을 사용하자.
한 문장을 여러개의 텍스트 영역으로 처리하면 코드상으로 낭비가 심합니다. 텍스트를 수정해야할 때도 불편합니다. 대신 Line-height를 이용하면 되니, 시각적으로 보이는거 말고 구조적으로도 만들기 편리하게 설계합시다.  Line-height는 텍스트 가독성뿐만 아니라 텍스트 영역 자체의 마진역할도 하기 때문에, 디자이너가 지정하지 않으면 코드로 바꿨을때 요소들의 간격이 달라집니다.

아래는 Line-height을 적용했을때 브라우저의 선택영역의 차이입니다.

 

스케치는 Line-height가 텍스트 영역으로 표시되지만 포토샵에서는 나타나지 않습니다. UI디자인에는 되도록 스케치를 사용합시다.

폰트의 기본 행간은 정해져있지만 브라우저 별로 약간의 차이가 있습니다. 아래는 각 브라우저에 Roboto, 폰트사이즈 36px, 행간 1.4를 적용한 예시입니다.

Fonts
페이지 로딩속도를 고려하자.

웹폰트의 장점은 디자인 수정이 쉽다는것, 단점은 페이지 로딩이 다소 느리다는 것입니다. 하지만 유지보수를 고려한다면 웹폰트를 추천합니다.

되도록이면 구글 폰트

Google Fonts

에 있는 폰트를 쓰도록 합시다. 구글 폰트는 모든 브라우저에 쉽게 삽입 가능하며 가볍습니다. 만약 커스텀 폰트를 사용할 경우 폰트 파일을 변환하는 과정에서 퀄리티가 떨어질 가능성이 높습니다. 그래도 꼭 사용해야한다면 저작권에 주의하면서 웹폰트 제너레이터를 이용하면 됩니다.

한글 폰트의 경우 제한적인 선택권이 있지만 그 중에서도 업데이트가 꾸준히 이루어지고 있는, 최근에 나온 폰트를 추천합니다. 아래는 추천 폰트입니다.

또 주의할 점은


두가지 이상의 폰트를 한 서비스에서 쓰지말 것.
페이지 로딩속도가 느려집니다. 한글폰트는 용량이 매우 크며, 커스텀 폰트는 더 심할 수 있습니다.


너무 많은 사이즈와 스타일을 사용하지 말것.
(이탤릭/볼드/라이트/씬/레귤러)

이 블로그 글은 페이스북 페이지 코리아 앱 메이커스에서도 보실 수 있습니다.
https://www.facebook.com/koreaappmakers/

• 그래픽 디자이너가 UX 디자인을 배워야 하는 6가지 이유Reader's universe/SocialNowhere Cafe2022-08-22 19:23
• 선택 안됨
  UX 디자인으로 이직하려는 그래픽 디자이너를 위한 5가지 팁Reader's universe/SocialNowhere Cafe2022-08-22 19:18
• 선택 안됨
  기초 코딩 공부하기 좋은 사이트 모음 (유료/무료)Reader's universe/SocialNowhere Cafe2022-08-21 20:17

그래픽 디자이너가 UX 디자인을 배워야 하는 6가지 이유

UX 디자인으로 이직하려는 그래픽 디자이너를 위한 5가지 팁

기초 코딩 공부하기 좋은 사이트 모음 (유료/무료)