본문 바로가기

UX

UI디자인, 드롭 쉐도우 사용 가이드 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 피그마에서 UI디자인을 진행할 때 엘리먼트에 그림자를 주게 되는때, 이때 가장 아름다운 그림자를 주는 방법에 대한 가이드를 공유하고자 합니다. 여러분은 그림자를 어떻게 주고 계신가요? 드롭 쉐도우 사용 가이드 피그마를 활용해 드롭 쉐도우 잘 넣기 드롭 쉐도우의 중요성 부드러운 드롭 쉐도우는 시각적 계층 구조를 개선하며 보다 직관적이고 매력적인 사용자 경험을 제공하는 현실감을 조성하기 때문에 UI 설계에 매우 중요합니다. 그림자 값 사용 가이드 드롭 그림자를 부드럽게 유.. 더보기
폰트 다운로드 받을 때 OTF, TTF의 차이 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 초보 디자이너 분들이 폰트를 다운받을때 그냥 모든 파일을 전부 다운받고는 합니다. 폰트 파일에는 .OTF와 .TTF의 저장형식이 다른 파일이 두개 존재하는데 어떤 폰트는 두개다 파일이 있고 어떤 폰트는 하나만 존재합니다. 앞으로는 그냥 모두 다운받지 마시고, 모두 다운받더라도 이 파일이 어떤 권장 사용범위를 가지고 있는지 이해하고 내가 진행중인 작업과 해당 타입의 파일이 적합한지 확인할 수 있도록 합시다! 폰트 다운 받을때 저장형식 OTF, TTF의 차이 TTF OTF.. 더보기
IT업계 종사자라면 당연히 알아야할 앱의 종류 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 모바일 기기의 앱이 모두 다 똑같은 앱이 아닙니다!! 각자 다 개발 환경이 다른데요, IT업계 종사자라면 당연히 알아야하는 앱의 종류(네이티브, 웹 앱, 하이브리드)에 대하여 자세한 차이점과 장단점에 대하여 알아보겠습니다! 모르면 안되는 앱의 종류 네이티브 앱 / 앱 웹 기반 / 하이브리드 앱 모바일 기기에 최적화 된 "네이티브 앱(Native App)" ‘네이티브 앱(Native APP)’이란 모바일 기기에 최적화된 네이티브 언어로 개발된 앱을 뜻합니다. 국가별로 언.. 더보기
UX/UI디자이너가 알면 좋을만한 10가지 이론(2) 원태현(DOBLING, 기획자) 두블링의 UX/UI를 기획 및 디자인 하면서 기초적으로 알고있으면 도움이되는 UX/UI 이론 10가지를 소개하려고 한다. ‘밀러의 법칙 / Miller’s Law’ 평균적인 사람은 작업 메모리에 7 (+/- 2)개의 항목만 저장할 수 있다고 알려져 있다. 흔이 마법의 숫자 7 이라고 말하는데, 이는 정보의 양에 상관없이 인간의 기억범위는 대략 7정도로 제한된다고 하는 것에서 나온 말이다. 흔이 우리가 보는 숫자들을 보게된다면 평균적으로 9자리를 넘지 않고 전화번호도 8자리에서 그치는 것을 보면 쉽게 이해할 수 있다. ‘파킨슨의 법칙 / Parkinson’s Law’ 파킨슨의 법칙은 어떤 일이든 주어진 시간이 다 소진할 때까지 수행시간이 길어진다. 즉 사용자는 어떤 작업을 .. 더보기
심플한 디자인의 원리 - 축소, 숨기기, 구체화 원태현 (DOBLING, 기획자) 브랜딩과 디자인에 대한 인사이트를 공유하고자 한다 축소하고(Shrink), 숨기고(Hide) 구체화(Embody)하는 작업은, 심플한 디자인에서 가장 기본적으로 요구되는 조건이다. 이러한 이론이 잘 들어났다고 보는 우리 일상생활 속 물건에 대해 소개 하겠다. 심플한 디자인의 원리 축소하고(Shrink), 숨기고(Hide) 구체화(Embody) 나는 축소하고(Shrink), 숨기고(Hide) 구체화(Embody)의 대표 적인 예로 전화를 생각하였다. 과거 초기 전화는 송신장치와 수신 장치가 분리되어있었고 또한 그 크기 또한 거대하였다 이러한 크기로 인해 이동은 당연히 불가능하며 전화를 하고 있는 동안에도 불편함이 한두 가지가 아니었다. 한 손은 귀에 한손은 입에 대고 있으.. 더보기
디자인 시스템에서 왜 아토믹 디자인 방법론을 적용하나? 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 디자인 시스템 구축을 진행하면서 아토믹 디자인 방법론에 대한 공부를 하게 되었는데요, 왜 아토믹 디자인 시스템을 적용하는가에 대하여 글을 더 써보려고 합니다. 왜 아토믹 디자인을 사용하나? UI설계 방법 - 아토믹 디자인 아토믹 개념정리 아토믹 디자인 방법론은 UI 설계 방법 중 하나입니다. 복잡한 화면을 가장 작게 분해할 수 있는 원자 단위까지 나눔으로써, 각 요소 간 컴포넌트 재활용성은 높이고 복잡한 화면 구성을 쉽게 처리해주는 접근 방식 중 하나입니다. 아토믹 디.. 더보기
디자인 시스템 구축을 하고싶다면? 이것부터 알아야죠! 한윤석 (두블링 DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 디자인 시스템 구축을 진행하면서 디자이너로써 너무 재미있었고 많은 공부를 할 수 있었는데요, 디자인 시스템 구축을 위한 기본적인 지식은 아토믹 디자인 방법론에 대하여 먼저 설명하려고 합니다. 아토믹 디자인 방법론 아토믹 디자인이란? 원소개념 Brad Frost가 만든 Atomic Design 방법론은 명확한 순서와 계층 구조로 강력한 디자인 시스템을 만들기 위한 디자인 방법론 입니다. 이름에서 알 수 있듯이 이 방법론은 모든 물질의 구성이라는 기본 화학 개념에서 파생되.. 더보기
왜 프리텐다드 폰트를 사용해야하나? 한윤석 (DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 새로운 신규 서비스 런칭 디자인 작업에 참여하면서 기존에 사용하던 'Noto Sans'대신 'Pretendard'폰트를 사용하려고 하고있습니다. 폰트를 사용할때 경영진과 고객사 등 이해관계자들에게 왜 리소스를 들여서라도 폰트를 바꿔야하는지 '설득'을 해야 했습니다. 폰트를 도입할때에도 검토와 고민이 많이 필요합니다. '이게 무슨 폰트냐? 안익숙하다', '왜 다들쓰는 noto sans를 쓰지 않고 별도로 다른 폰트를 쓰냐?', '심미적으로 어떤 부분이 낫다는 거냐?'등 이해관계.. 더보기
UI 디자이너가 퍼블리싱도 알아야해? 한윤석 (DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 저는 UI 디자이너로써 퍼블리싱 업무도 함께 진행하고 있습니다. UI 디자이너가 퍼블리싱도 알아야해?라고 할 수 있지만 디자이너가 퍼블리에 대한 이해도가 높을때의 장점에 대해서 이야기 하려고 합니다. UI 디자이너는 왜 퍼블리싱의 이해도가 높아야 할까? 배경지식 퍼블리싱이란? 퍼블리싱은 HTML, CSS를 활용해 웹에서 화면을 시각적으로 구현하는 코딩 작업입니다. 초기 웹 개발판에서 html 마크업 작업은 웹디자이너의 고정 업무도, 웹 개발자의 고정 업무도 아니었습니다. 둘 .. 더보기
4배수 디자인의 시대 by두블링 DO BLINGJun 01. 2023 한윤석 (DOBLING, UI/UX 디자이너) 현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다. 새로운 서비스 런칭을 위한 디자인 업무를 하면서 grid system에 대하여 논의를 하게 되었습니다. 8배수로 디자인 할 것이냐 4배수로 디자인할 것이냐 다른 이해관계자를 어떻게 설득할 것이냐 등의 이야기가 나오는 도중 왜 4배수 디자인을 해야하는지 정리해보았습니다. 8배수 디자인 보다 4배수 디자인이 대세인 이유 배경지식 왜 8px 그리드 디자인을 사용했을까? 아래의 이미지를 확인하시면 8px 그리드는 모든 디스플레이가 커버.. 더보기

티스토리툴바