archuive

원본 아티클을 번역 및 간단히 요약한 글입니다. 탐색이 쉬운 웹사이트는 사용자가 원하는 콘텐츠에 더 빠르고 효율적으로 액세스할 수 있도록 한다. 가장 안전한 네비게이션 원칙과 요소들을 살펴본다. Consistency (일관성) 메뉴는 사용자가 주제에 관계없이 쉽게 찾을 수 있도록 모든 페이지와 같은 위치에 있어야한다. Hubshout에서 수행한 설문조사에 따르면 사용자의 33%는 탐색하기 어려운 사이트를 떠난다고 한다. Hamburger menu (햄버거 메뉴) 2014년의 햄버거 메뉴 논란 햄버거는 유용하다. UI를 깔끔하게 만든다. 또한 사용자들에게 이미 많이 학습되어 있다. Simplicity and conciseness (단순함과 간결함) 탐색이 간결할수록 더 많은 홈페이지 권한이 내부 페이지로 ..

부모(parents)와 자식(children), 형제 (siblings) 관계 피그마의 오브젝트(객체) 사이에는 부모, 자식, 형제 관계가 있다. 이 용어는 웹 개발이나 프로그래밍에서 유사한 관계를 설명하기 위해 일반적으로 사용하는 용어이다. 이 용어에 대해 명확하게 알아보자. OOP(Object-Oriented Programming)을 경험해보았다면, 이러한 관계는 약간 다르다. 피그마의 부모/자식 관계는 실제 상속과 관련이 없다. 피그마에서, 이러한 관계는 DOM(Document Object Model)과 더 유사하게 작동한다. 즉, 내부에 엘리먼트를 포함하고 있는 컨테이너의 개념이다. 부모(parents)와 자식(children), 형제 (siblings) 우리는 캔버스에서 오브젝트와 오브젝으가 어..

colorbox.io 를 활용해 디자인 시스템의 컬러 팔레트를 구성해보자. lyft의 디자이너였던 Kevyn Arnott가 새로운 ColorBox를 만들었다. 간단하게 특징을 요약해보자. 멀티 컬러 생성 한 워크스페이스에서 여러 개의 색상 팔레트를 추가할 수 있다 접근성 표시 내장 색상을 알고리즘 접근 방식으로 풀어나간 이유는 모든 사람이 접근성에 최적화된 색상 시스템을 제작할 수 있도록 돕고싶었기 때문이라고 한다. ColorBox에서 접근성과 관련하여 디테일하게 라벨까지 선택이 가능하다. 오른쪽 패널에서 색상 대비 레벨도 껐다 켤 수 있다. Constast Colors에는 작성한 컬러 팔레트가 텍스트로 들어갈 배경 색상을 정의해준다고 생각하면 좋다. 다크 모드 컬러를 선택한 뒤, 옵션 탭에서 다크모드를..

포토샵과 같은 일부 현대 디자인 애플리케이션은 여전히 'leading'라는 용어를 사용하는 반면 HTML과 CSS에서는 이 속성을 'line-height'라고 부른다. leading, line spacing, line height는 모두 같은 것을 말합니다. line height 또는 line spacing은 일반적으로 글꼴 크기의 백분율로 측정됩니다. 일반적인 통념으로는 130-150%의 행간격이 가독성에 이상적이지만 200%까지 허용됩니다. 완벽한 line height는 글꼴 자체의 디자인과 크기에 따라 달라집니다. 모든 텍스트에 적용되는 매직 넘버는 없습니다. 글꼴 크기의 1.5배 선 높이로 시작하는 것이 좋은 시작이며, 그에 따라 조정할 수 있습니다. 1.5 라인 높이를 사용할 때는 8 포인트 그..

피그마는 (오토 세이브 되는..) 버전 히스토리 기능도 매우 훌륭하다고 생각했는데, 어느새 워크 플로우를 관리하기 위한 브랜치 기능까지 추가되었다. 피그마에 작성된 브랜치 문서를 살펴보았다. 최근 브로들리 사용중이다. 이전 툴과는 다르다. 첫번째 원칙으로 단순성과 일관성에 초점을 맞췄다. 브랜치를 사용하기 적절한 예제 이미 존재하는 소스를 기반으로 작업을 시작할 때 고려하면 좋다. 특히 실험적이고, 반복적인 경우 디자인 라이브러리 유지보수 메인 파일은 항상 하나로 유지됨 공통 스타일 추가하거나 수정할때 기존에 존재하던 컴포넌트나 배리언츠 수정할때 라이브러리에 새로운 콤포넌트 만들때 컴포넌트 수정 제안이 편리해짐 의사 결정권자 혹은 콜라보레이터에게 공유할 때 개발 파트에 시안을 전달하기 위해 작업을 멈춰야..

데이터를 통해 어떤 가설, 판단, 결론을 도출하는 것은 의사결정의 영역이다. 용어 (Terms) DAU : Daily Active User (1일간 방문한 활성 유저) MAU : Monthly Active User (1달 방문한 활성 유저) ARPU : Average Revenue Per User (결제액을 전체유저 수로 나눔) ARPPU : Average Revenue Per Paying User (결제액을 결제를 한번이라도 한 적 있는 유저 수로 나눔) 전환율: 들어온 고객이 취하게 하고자 하는 액션(예:회원가입, 결제 등) 을 실행하는 비율 이탈률: 들어온 고객에서 전환률을 뺀 수치 리텐션: 서비스를 재이용하는 유저의 비율에 대한 지표이다. 장기적인 UX, UI 설계에 중요하다. 보통 1주, 2주,..

디자인시 스크린 사이즈에 대한 규격과 규칙을 정의한다. 이는 디자인할 때 그리드 시스템 컬럼 갯수나 거터 사이즈 등을 설계하는 단초가 되며, 특히 각 디바이스별로 레이아웃이 달라질 경우 Break Point를 설정하는데 중요한 역할을 한다. 디자인하기 전 프로젝트 초기에 정의해두는것이 좋다. 나의 경우 모바일 (IOS, Android)은 고려할 필요가 없어서 반응형 웹 구현을 고려해 정의했다. Desktop: 1440 x 1024 Tablet: 768 x 1024 Mobile: 320 x 1024하지만, 웹의 경우 처음부터 1920 기준으로 작업하면 스케치나 포토샵에서 보는것과 실제 퍼블리싱된 결과물 사이에 이질감이 들 수 있다. 브라우저의 타이틀바, 주소 및 검색바, 윈도우의 시작 표시줄, 스크롤바 등..

진행률 컨트롤 (Progress control)은 긴 작업을 진행중인 사용자에게 피드백을 제공한다. 진행률 표시가 표시될 때 사용자가 앱을 조작할 수 없다는 의미이며 사용되는 표시기에 따라 대기 시간을 예측할 수 있다는 의미이다. 진행률 유형 작업 진행을 표시하기 위해 ProgressBar 또는 ProgressRing 두가지 컨트롤을 사용 ProgressBar 확정 (Determinate) 작업의 완료율을 표시 기간을 알 수 있는 작업 중 사용 진행률이 사용자의 앱 조작을 차단하지 않음 ProgressBar 미확정(Indeterminate) 작업이 진행중임을 표시 완료 시간을 알 수 없다는 의미 사용자의 앱 조작을 차단하지 않음 ProgressRing 미확정(Indeterminate) 작업이 완료될 때까..

Arrange Layers 부모(parents)와 자식(children), 형제 (siblings) 관계 피그마의 오브젝트(객체) 사이에는 부모, 자식, 형제 관계가 있다. 이 용어는 웹 개발이나 프로그래밍에서 유사한 관계를 설명하기 위해 일반적으로 사용하는 용어이다. 이 용어에 대해 명확하게 알아보자. OOP(Object-Oriented Programming)을 경험해보았다면, 이러한 관계는 약간 다르다. 피그마의 부모/자식 관계는 실제 상속과 관련이 없다. 피그마에서, 이러한 관계는 DOM(Document Object Model)과 더 유사하게 작동한다. 즉, 내부에 엘리먼트를 포함하고 있는 컨테이너의 개념이다. 부모(parents)와 자식(children), 형제 (siblings) 우리는 캔버스에..

WCAG(Web Content Accessibility Guidelines) W3C에서 발표한 웹 콘텐츠 접근성 지침. 1990년대부터 영국 · 호주 · 미국 · 일본 등이 장애인 차별 금지 관련법에 따라 모든 이의 웹 접근성을 높였으며, 1997년 5월 W3C가 '웹 콘텐츠 접근성 지침(WCAG)'를 내놓아 제도 확산에 속도를 더했습니다. KWCAG(Korean Web Content Accessibility Guidelines) 해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침. 원칙 4개, 지침 13개, 항목 24개로 구성 한국도 2009년 5월 '국가 정보화 기본법'을 개정해 '장애인 · 고령자 등의 정보 접근 및 이용 보장..