Skip to content

Design

디자인(design, 문화어: 데자인)은 동사와 명사로 함께 쓰일 수 있으며, 명사로서의 디자인은 다양한 사물 혹은 시스템(건축에서의 청사진, 엔지니어링 도면, 사업의 표준 프로세스, 서킷보드의 다이어그램, 바느질 패턴 등)의 계획 혹은 제안의 형식 (도안, 모델 이나 다른 표현) 또는 물건을 만들어내기 위한 제안이나 계획을 실행에 옮긴 결과를 의미하며, 동사로서의 디자인은 이것들을 만드는 것을 의미한다. 일반적으로 받아들여지는 일원화 된 디자인의 정의는 존재하지 않으며, 디자인이라는 용어는 각자 다른 분야에서 다양한 의미로 해석되고 응용되고 있다. 실질적으로 만져지는 물건을 창조하는 행위나 그 행위의 결과(유리 그릇, 도자기, 나무 장식품 등) 역시 디자인이라 할 수 있다.

  • 디자인이라는 용어는 지시하다·표현하다·성취하다의 뜻을 가지고 있는 라틴어의 데시그나레(designare)에서 유래한다.

일반적으로 디자인 결과물은 다양한 목적을 동시에 효과적으로 달성해야 하기 때문에 디자인 업무는 그 과정에서 다양한 측면(예를 들어 산업디자인의 경우 재료, 생산효율, 안전성, 경제성, 내구성, 매력 등)을 고려해야 하며, 이를 위해 창조 과정에 앞서 디자인 리서치, 사고, 실험 모델, 상호 교감적 실험 및 조정 과정, 재설계 과정 등을 거칠 수 있다. 따라서 과정으로서의 디자인은 디자인되는 물건이 디자인되는 방법과 이에 참여하는 개인과 참여자의 분야, 그리고 그 다양성에 따라 많은 다양한 방법과 형태가 존재한다. 철학 에서는 추상적 단어로서 디자인을 어떠한 패턴 혹은 존재 이유와 목적을 가진 의미로 지칭한다.

Categories

Social networking service

  • Pinterest - 이용자가 스크랩하고자 하는 이미지를 포스팅하고 다른 이용자와 공유하는 소셜 네트워크 서비스.
  • Dribbble - 드리블은 디지털 디자이너와 크리에이티브를 위한 자체 개발 및 소셜 네트워킹 플랫폼이다.

Pixel art

Tutorials

Resources

Tileset

Example

  • Baba is you: 24x24 (?)
  • Cadence of Hyrule: 24x24 (?)

안전하게 따라할 수 있는 비쥬얼 디자인 규칙들

꼭 따라야 할 필요는 없지만, 이 규칙들은 언제나 그대로 적용해도 괜찮음

  • 순수한 검은색/흰색 대신 검정색과 흰색에 가까운 색을 사용하기
    • 순수한 블랙은 스크린에서 부자연스러워 보이고, 순백은 너무 밝음
    • #000000 과 #FFFFFF 대신 #222222 와 #F2F2F2 를 사용
    • 이후엔 블랙/화이트를 지칭하면 이 색들을 이야기 하는 것
  • 중성색(뉴트럴)에 색을 입히기
    • 중성색은 보통 블랙/화이트/그레이
    • 색을 사용한다면 중성색들에 약간만 색을 추가할 것 (grey 대신 light red, black 대신 dark blue)
    • 이렇게 하면 색상 팔레트가 더 일관성 있게 느껴짐
    • HSB를 사용한다면 약 5% 이하의 채도만 추가하면 됨
  • 중요한 엘리먼트에는 고대비(high contrast)를 사용할 것
    • 사용자가 주목해야 하는 모든 요소들 : 버튼, 콘텐츠 등
    • 구분선, 드롭쉐도우 등은 대비를 최대한 적게 사용
  • 디자인의 모든 요소는 신중해야함
    • 여백, 정렬, 사이즈, 간격, 색상, 그림자 를 포함한 모든 것
    • 누군가 디자인의 특정 부분을 물어봤을 때 왜 그렇게 했는지를 설명할 수 있어야 함
  • Optical(시각적) 정렬이 수학적 정렬 보다 나을 때가 많음
    • 특정 형태들은 눈으로 봤을 때 정렬되게 표현하는게 더 나을 때가 있음
    • 눈으로 정렬 하려면 연습이 필요하지만, 규칙적으로 해보면 빠르게 캐치 가능
  • 큰 글자는 글자 간격과 줄 높이를 낮추고, 작은 글자에서는 올릴 것
    • 모든 텍스트에 적용 됨
    • 글자가 클수록, 각 글자와 라인간에 여백이 조금 필요함. 반대 역시 마찬가지
  • 컨테이너의 테두리는 컨테이너 및 배경과 대비되어야 함
    • 테두리는 컨테이너 내부와 배경색 사이가 아닌 배경보다 더 어두운 색상으로
  • 모든 것들은 다른 것과 정렬 되어야 함
    • 정렬은 사물들이 서로 관련되어 있다는 것을 알려줌
    • 무언가가 다른 것과 정렬되어 있지 않다면 디자인에 속하지 않는 것처럼 느껴짐
    • 이상적으로는 각 요소가 일종의 논리에 의해서 다른 요소들과 정렬되어야 함
  • 팔레트의 색상에는 고유한 밝기 값이 있어야 함
    • 색상의 밝기 값이 서로 다른 경우, 색조 뿐만 아니라 밝기에서도 고유한 룩앤필을 줄 수 있음
    • 이렇게 하면 각 색상들이 서로 많이 경쟁하지 않기 때문에 더 좋은 색상팔레트가 됨
  • 중성색에 색을 입힌다면, Warm 또는 Cool 중 하나만 써야함. 둘 다 쓰지 말 것
    • 중성색에 웜/쿨 컬러를 같이 사용하게 되면 컬러팔레트가 일관성있게 느껴지지 않음
  • 사이즈들은 수학적으로 관련되어야 함
    • 요소들간의 간격이나, 크기 등은 일종의 축척에 의해 결정 되어야 함. 이렇게 하면 디자인이 일관되게 보이도록 도와줌
    • 예제에서는 모든 요소들을 8의 배수로 사용. 간격은 8/16/24/32, 줄높이는 48/40/24, 텍스트 크기는 40/32/16
  • 요소들은 시각적 가중치의 순서대로 배치되어야 함
    • 한 행이나 열에 여러개의 요소들이 있고, 그중 일부가 다른 것보다 시각적으로 더 무겁다면(버튼 2개와 링크3개 처럼)
    • 시각적으로 가장 무거운 요소가 먼저오고 가벼운 요소가 순서대로 마지막에 와야함
    • 주의할 점은 시각적으로 가장 무거운 요소가 가장 바깥에 있어야 한다는 것
  • 가로 그리드를 사용할 경우, 12개의 컬럼을 이용할 것
    • 컬럼 단위로 나눈다면 12개로 하면 1,2,3,4 컬럼을 사용할 수 있어서 많은 유연성을 제공
  • 대비가 높은 지점 사이에 간격을 둘 것
    • 우리의 눈은 대비를 기준으로 요소의 가장자리를 찾기 때문에, 대비되는 지점 사이에는 간격이 있을 것으로 기대함
  • 더 가까운 요소들은 더 가벼워야 함
    • 화면의 요소들이 사용자에게 가까울수록(더 앞쪽에 있을 수록) 더 가벼워져야함
    • 이것은 라이트/다크모드에도 같이 적용 됨. 실제 세상이 이렇게 작동하기 때문
  • 드롭 쉐도우 Blur 값을 거리 값의 두배로 설정할 것
    • Y축으로 4픽셀 확장되는 그림자를 설정할 경우, 블러 값은 8 픽셀로 설정
    • 요소가 보는 사람에게 "가까워 지면" 그림자의 불투명도(opacity)도 낮추는게 좋음
  • 복잡한 것 위에 단순한 것을 두거나, 단순한 것 위에 복잡한 것을 둘 것
    • 복잡한 배경(화려한 그라데이션)은 전면(텍스트)가 단순할 때 가장 잘 보임
    • 앞이 복잡하다면 간단한 배경이 가장 적합
    • 단순한 것 위에 단순한 것도 가능은 하지만 밋밋해 보임
    • 복잡한 것 위에 복잡한 것은 시각적 혼란을 주므로 피해야 함
  • 컨테이너 색상은 밝기 제한내에서 유지할 것
    • 배경과 컨테이너 사이의 밝기 차이는 어두운 인터페이스에서는 12%, 밝은 인터페이스에서는 7% 이내여야 함 (HSB 컬러시스템 상의 밝기 값)
    • 잘 디자인된 웹사이트 약 100개를 대상으로 컨테이너의 밝기를 배경과 비교하여 확인한 연구에서 알아낸 것
  • 외부 패딩은 내부 패딩과 같거나 더 크게 만들 것
    • 컨테이너의 내부 패딩은 컨테이너 내부의 요소 사이의 공간. 외부 패딩은 요소와 컨테이너 가장 자리 사이의 공간
    • 외부 패딩은 내부 패딩과 같거나 더 커야함
  • 본문 텍스트는 16px 이상으로 유지
    • 16px는 대부분의 브라우저에서 기본 텍스트 크기
    • 이 크기 이하의 텍스트는 읽기 어려우므로, 본문에는 사용하지 않는 것이 안전
  • 70자 정도의 줄 길이를 사용할 것
    • 줄길이가 60 이나 80인지는 그다지 중요하지 않지만, 어느쪽이든 멀리가면 가독성 문제가 발생할 수 있음
  • 버튼의 가로 패딩은 세로 패딩의 두배로 설정
    • 표준 버튼의 패턴은 높이보다 넓음
    • 사람들이 버튼으로 인식하게 하려면, 이 패턴을 따르는 것이 좋음
  • 최대 2개의 서체만 사용
    • 두번째 서체는 디자인 뒤에 있는 컨셉을 강화할 수 있는 기회
    • 또한 디자인에 다양성을 추가하는데 도움이 됨
    • 두 개 이상 사용할 필요는 거의 없으며, 디자인이 시각적으로 혼란스럽게 느껴질 수 있음
  • 중첩된 코너를 바르게 처리하기
    • 가끔 두개 이상의 둥근 모서리가 중첩되는 경우가 있음
    • 제대로 보이게 하려면 내부 모서리 반경을 외부 모서리 반경에서 둘 사이의 거리를 뺀 값으로 설정할 것
    • 예) 외부 모서리 반경이 30px 이고, 내부 모서리와 20px 떨어져 있다면 내부 모서리 반경은 10px로
  • 두개의 구분선을 같이 두지 말 것
    • 배경 트렌지션, 컨테이너 가장자리, 분할선은 시각적으로 구분하기가 어려움
    • 두 개 이상의 구분선이 붙어 있도록 하지 말 것

See also

Favorite site

References

  1. Miniboss_Pixel_art_tutorials.zip ↩