애플의 디자인 차별성과 디자인 시스템

Jun·2024년 10월 24일
0
post-thumbnail

2024/Oct/23(Wed)

Apple

Steve Jobs
Co-founder of Apple
1955 - 2011

Apple의 디자인 철학

심플하고 직관적인 제품을 통해 사용자 경혐을 극대화 하는것.

Apple의 핵식 원칙

  • 단순함 : 간단한 인터페이스, 직관적인 사용자 경험
  • 일관성 : 통일된 디자인을 적용
  • 세심한 디테일 : 잘안보이는 작은 부분까지 세심하게 디테일을 챙기는것
  • 인간 중심 디자인 : 사용자의 니즈를 파악하고 이해해서 가치를 제공하는 제품을 만든다

Steve Jobs는 사용자의 편의성을 중요시하면서도 미적 가치를 중요하게 생각하고 제품을 만든것 같다. 이를 통해 소비자들에게 최상의 만족도를 선사하고 더욱 많은 사람들이 "Apple"이란 회사와 제품에 더 열광하게 만든것 같다.


디자인 시스템

디자인 시스템은 다양하게 사용하는 공통되는 언어와 디자인을 더욱 빠르고 효율적으로 사용하기위해 만들어둔 표준 집합이다. 대표적인 예로 애플은 디자인 시스템구축을 정말 잘해둔 회사중 하나이다.

디자인 시스템의 대표적인 요소들

컬러 : 컬러속에 정보를 지니고있어 직관적인 정보 전달이 가능하고 뛰어난 접근성을 보여준다.
타이포그래피 : 브랜드의 정체성을 지닌 폰트로 개성을 지니며 읽기 쉽고 빠르게 정보를 전달할수있는 방법이다.
아이콘 : 전달하고자 하는 메세지를 사용자에게 간단하게 이해를 시킬수있다.
컴포넌트 : 같은 모양의 아이콘을 이름만 바꿔 다른 기능으로 연속적으로 사용할수있다.
네이밍 규칙 : 자신들만의 규칙을정해서 정한 컬러나 폰트 등에 이름을 붙이는것이다.

디자인 시스템의 장점

  • 효율성 확보 : 비슷하게 사용되는 입력창, 컴포넌트, 레이아웃등을 반복 사용해서 시간 단축에 용이하다.
  • 일관성 있는 사용자 겸험 : 통일된 UI 디자인을 적용시켜 사용자의 혼란을 최소화 한다.

    윈도우는 UI가 버전마다 달라진다
    하지만 애플은 버전이 달라져도 비슷하다

  • 다양한 제품에 대응 : 각기다른 디바이스에 맞춰 빠르고 쉽게 디자인이 가능하다.
반응형적응형
화면 크기에 따라 레이아웃이 바뀜미리 정해진 화면 크기에 맞는 레이아웃을 보여준다
이미지 크기가 뷰포트에 따라 달라진다사용자의 디바이스에 맞춰서 레이아웃을 로드한다
화면크기에 반응고정된 레이아웃
  • 협업에 기여 : 서로다른 디자이너들이 다양한 아이디어들을 내고 성장하고 발전시켜서 진화하는것이 팀의 목적과 가치를 높이는 것이다.

디자인 시스템의 단점

  • 시간과 비용 소요 : 초기 디자인 시스템을 구축하는데 많은 시간과 노력을 필요로 한다.
  • 변경 관리의 어려움 : 디자인 시스템을 업데이트하거나 변경할때 어려움이 있다.
  • 제약 사항 : 일관성을 위해 규칙이 뚜렷하므로, 디자이너가 자유롭게 표현하는것을 제한할 수 있다.

디자인 시스템은 만들어두면 정말 편리하고 기준점을 정해주는 좋은 가이드라인인것 같다. 하지만 브렌드의 방향이나 정체성을 똑바로 알고 정해두는것이 좋은 방법인거 같다.


UI/UX Color

색상 모델

CMYK : 인쇄용으로 많이 쓰인다. (감산 혼합 색상 모델)
RGB/RGBA : 디지털 스크린에서 많이 쓰인다. (가산 혼합 색상 모델)
Hex code : RGB색상을 16진수로 만든 색상 코드. (디지털에서 많이 쓰인다)

색의 사용과 용도

  • 강조 : 사용자의 주의를 끌기위해 사용한다.
  • 암시 : 상징적 의미를 부여해서 의미를 암시한다.
  • 상호작용 : 클릭 가능 버튼, 링크 등 사용자가 이용가능하다는걸 알려주는 용도도있다.
  • 상태 : 사용자가 이용 가능한 기능인지 직관적으로 알려줌.

Typography

폰트, 색상, 크기등을 조절하여 사용자에게 정보의 전달력을 극대화 시켜주는 시각적 디자인 기술이다.

  • 폰트 : 폰트 마다 다른 개성의 디자인을 보유하고있다.

글꼴의 종류

SerifSans-Serief
장식선 있음장식선 없음
고전적, 전통적현대적, 모던함
가독성이 좋다짧은 택스트 가독성이 좋다
인쇄물디지털
  • 글자 크기 : 다른 크기를 이용해서 정보들을 단계적으로 전달한다.
  • 줄간격 : 각 줄 사이의 폭이 너무 좁으면 가독성이 떨어진다. (디자인에 따라 예외 케이스가 있을수있다.)
  • 자간 : 글자들 사이의 간격이다. 너무 붙어있으면 가독성이 떨어진다.
  • 정렬 : 정렬 방식에 따라 사용자의 집중되는 시선이 위치가 달라진다.

Typography의 역활은 자신들만의 폰트를 만들어서 자신들의 브렌드 정체성을 나타내고 브랜드의 이미지나 특징을 사용자한테 직접적으로 보여줄수있는 방법중 하나인거 같다.


비트맵 vs 벡터

컴퓨터 분야에서 디지털 그래픽 이미지를 저장하는데 쓰이는 다른 방식의 저장 방법의 형태이다.


비트맵벡터
작은 정사각형 단위인 픽셀 기반 이미지수학 기반 디지털 이미지
확대하면 깨짐현상 발생곡선으로 만들어져 깨짐현상 없음
PNG, JPEG, GIF의 확장자확장성이 필요한 이미지에 사용

서로다른 용도로 쓰이는 만큼 필요로한 작업에 더 효과적으로 쓰일수 있다.

profile
HI

0개의 댓글