본문 바로가기

ui디자인

UI디자인, 드롭 쉐도우 사용 가이드 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 피그마에서 UI디자인을 진행할 때 엘리먼트에 그림자를 주게 되는때, 이때 가장 아름다운 그림자를 주는 방법에 대한 가이드를 공유하고자 합니다. 여러분은 그림자를 어떻게 주고 계신가요? 드롭 쉐도우 사용 가이드 피그마를 활용해 드롭 쉐도우 잘 넣기 드롭 쉐도우의 중요성 부드러운 드롭 쉐도우는 시각적 계층 구조를 개선하며 보다 직관적이고 매력적인 사용자 경험을 제공하는 현실감을 조성하기 때문에 UI 설계에 매우 중요합니다. 그림자 값 사용 가이드 드롭 그림자를 부드럽게 유.. 더보기
실무 디자인 시스템 구축 방법(3) 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 지금까지 디자인 시스템 구축을 위해 디자이너와 개발자의 Agenda를 확인 후 목표와 목적 원칙을 정하고 디자인 시스템의 기초를 다지는 작업을 설명하였습니다. 이번에는 이것의 가이드라인을 정립하는 단계에 대하여 알아보도록 하겠습니다. 실무에서의 디자인 시스템 구축 디자인 시스템 문서화 디자인 가이드라인과 컴포넌트 디자인 시스템에서 아토믹 방법론을 기반으로 한 컴포넌트를 구성했다면 해당 컴포넌트에 대한 가이드라인을 만들어야 합니다. 가이드라인을 만드는 이유는 조직 전체가.. 더보기
실무 디자인 시스템 구축 방법(2) 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 저번글에서 디자인 시스템에 대한 디자이너와 개발자 각자의 Agenda와 디자인 시스템 구축을 위한 팀의 목표와 목적에 대하여 알아보았습니다. 이번글에서는 디자인 시스템 정의 및 개발에 대하여 이야기해보겠습니다. 실무에서의 디자인 시스템 구축 디자인 시스템 정의 Design Principle & Pattern 똑똑한 개발자 디자인 시스템 원칙 Design Principle 디자이너 개발자간 효율적인 커뮤니케이션을 위해 일관성, 효율성, 확장성을 고려하여 시스템을 구축하여.. 더보기
실무 디자인 시스템 구축 방법(1) 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 디자인 시스템 구축을 진행하면서 아토믹 디자인 방법론과 개발자가 각 컴포넌트를 어떻게 관리하는지에 대해 알아보았습니다. 그럼 이제 본격적으로 실무 디자인 시스템 구축방법에 대하여 알아보겠습니다. 실무에서의 디자인 시스템 구축 모두를 위한 디자인 시스템 디자인 시스템에 대하여 디자인시스템이란 디지털 제품에서 디자이너와 개발자가 공용으로 활용할 수 있는 하나의 언어 형태로서, 디자인 원칙, 디자인 가이드라인, UX 패턴, UI 툴킷, 코드(code) 등이 전부 포함되는 ‘.. 더보기
개발자 입장에서의 디자인 시스템 - 스토리북 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 디자인 시스템 구축을 진행하면서 아토믹 디자인 방법론에 대해 알아보았습니다. 그럼 디자인 시스템을 정립했을때 개발자는 각 컴포넌트들을 어떻게 관리할까요? 디자인 시스템 관리 방법에 대하여 알아보겠습니다. 개발자 입장에서의 디자인시스템 스토리북과 디자인시스템 개발에 대한 이해와 스토리북 탄생 디자인 시스템은 컴포넌트 단위로 진행하지만 실제 개발환경은 항상 페이지 단위로 만들어진다는 점이 있습니다. 이는 개발자들이 컴포넌트 단위로 개발하는데 있어서 문제점이 되었습니다. 서.. 더보기
디자인 시스템 구축을 하고싶다면? 이것부터 알아야죠! 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 디자인 시스템 구축을 진행하면서 디자이너로써 너무 재미있었고 많은 공부를 할 수 있었는데요, 디자인 시스템 구축을 위한 기본적인 지식은 아토믹 디자인 방법론에 대하여 먼저 설명하려고 합니다. 아토믹 디자인 방법론 아토믹 디자인이란? 원소개념 Brad Frost가 만든 Atomic Design 방법론은 명확한 순서와 계층 구조로 강력한 디자인 시스템을 만들기 위한 디자인 방법론 입니다. 이름에서 알 수 있듯이 이 방법론은 모든 물질의 구성이라는 기본 화학 개념에서 파생되.. 더보기
실무에서 사용하는 UX디자인 방법론 - 애자일UX 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 실무에서 현업 디자이너로 일을 하다보면 스타트업, 중소기업, 중견기업, 대기업 등 회사의 성격별로 워터폴, 린UX, 애자일 UX 등 회사에서 진행하는 실무 프로세스가 다양합니다. 요즘은 빠른 가설과 검증을 지향하는 에자일 방법론을 많이 적용하고 있고 실제 내가 일하는 곳에서도 2주단위 스프린트 애자일 UX를 통해 빠른 업무를 이어나갑니다. 이 글에서 애자일 UX에 대하여 이야기 해보려고 합니다. 사용자 중심 디자인 방법론 빠른 가설과 검증 애자일 UX란? 기존의 제품 .. 더보기
왜 프리텐다드 폰트를 사용해야하나? 한윤석 (DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 새로운 신규 서비스 런칭 디자인 작업에 참여하면서 기존에 사용하던 'Noto Sans'대신 'Pretendard'폰트를 사용하려고 하고있습니다. 폰트를 사용할때 경영진과 고객사 등 이해관계자들에게 왜 리소스를 들여서라도 폰트를 바꿔야하는지 '설득'을 해야 했습니다. 폰트를 도입할때에도 검토와 고민이 많이 필요합니다. '이게 무슨 폰트냐? 안익숙하다', '왜 다들쓰는 noto sans를 쓰지 않고 별도로 다른 폰트를 쓰냐?', '심미적으로 어떤 부분이 낫다는 거냐?'등 이해관계.. 더보기
UI 디자이너가 퍼블리싱도 알아야해? 한윤석 (DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 저는 UI 디자이너로써 퍼블리싱 업무도 함께 진행하고 있습니다. UI 디자이너가 퍼블리싱도 알아야해?라고 할 수 있지만 디자이너가 퍼블리에 대한 이해도가 높을때의 장점에 대해서 이야기 하려고 합니다. UI 디자이너는 왜 퍼블리싱의 이해도가 높아야 할까? 배경지식 퍼블리싱이란? 퍼블리싱은 HTML, CSS를 활용해 웹에서 화면을 시각적으로 구현하는 코딩 작업입니다. 초기 웹 개발판에서 html 마크업 작업은 웹디자이너의 고정 업무도, 웹 개발자의 고정 업무도 아니었습니다. 둘 .. 더보기
탭과 세그먼트 버튼의 차이점 한윤석 (DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 두블링의 공모전(BNK 경남은행 앱 디자인 공모전)준비를 위해 UI디자인 작업을 하는 도중 문제에 부딪히게 됩니다. 경남은행 카드 페이지 기존UI 기존 경남은행 앱 화면을 UI를 개선하는 디자인을 진행중에 있는데 위 화면의 네모박스 안에 '전체, VIP, 체크카드, 신용카드(개인/기업)' 버튼을 어떻게 개선할 것이냐?에 대해서 토론을 하게 됩니다. 팀원들과 상의 후 최종적으로 Tab 버튼과 Segment button중 Segment button을 사용하기로 결정하였습니다. 결.. 더보기

티스토리툴바