툴팁은 주로 특정 기능이나 업데이트 된 서비스에 대한 도움말을 표시하는 데 사용함, 사용자가 익숙하지 않은 기능을 이해할 수 있게 도와주는 역할 툴팁이 상단, 하단, 좌우 디바이스 바깥 모서리에 가깝게 배치되면, 16의 간격을 두고 배치, 툴팁의 '화살표(▲)'는 해당 툴팁이 설명하는 요소 가까이에 일정한 간격으로 위치하며 툴팁을 제거하는 '닫기' 아이콘을 포함 할 수 있고 아이콘의 위치는 우측 중앙에 위치함 Tooltip의 텍스트는 한 번에 읽을 수 있도록 핵심만 담아야 합니다. Tooltip의 화살표 위치를 임의대로 조정 할 수 있습니다. Tooltip의 텍스트와 컨테이너는 일정한 간격을 유지해야 합니다. 출처 https://designsystem.line.me/LDSM/components/toolt..

tabs의 목적은 유사한 그룹이 많을 때 정리하기 위해서 사용함. 탭이 많다면 스크롤링이 된다는 것을 화면에 걸쳐서 알려주며 왼쪽 상단은 항상 선택되어 사용자의 위치를 알려줘야함. Tab은 반드시 한 줄이어야 합니다. Tab은 언제나 선택되어 있는 상태여야 합니다. Tab은 새로 만들어낸 용어가 아닌 직관적인 쉬운 용어를 사용해야 합니다. 긴 텍스트 Label은 말줄임표와 함께 사용자의 이해를 방해하기 때문에 사용하지 않습니다. 사용자의 시야에서 많은 Label을 발견하기 위해서는 스크롤 탭을 사용하여 스크롤링을 유도해야 합니다. 출처 https://designsystem.line.me/LDSM/components/tabs-ex-ko/ LINE Design System for Messenger - Com..

디자이너의 피할수 없는 숙명.. 다크모드...! 우리 회사에서는 app 에서 라이트/다크모드를 지원하기 때문에 리뉴얼에 대해 크게 신경을 쓰지 않고 있었으나.. 스타일 가이드를 살펴봤을 때 큰 문제점이 세 가지 있었다. 라이트/다크 모드 1:1 페어링이 안된다는 단점이 있었고(내 맘대로 컬러~) 시맨틱컬러가 정의되지 않은 상태라 개발자가 테마 컬러를 하나하나 바꾸고 있었으며(착한 개발자들 ㅠㅠ) 배경 컬러도 마찬가지로 디자이너마다 다르게 사용하고 있었다.(갑자기 이 배경컬러가 나온다고?) 그래서 연습할 겸 실제 토스 증권 클론 디자인을 진행 후 직접 1:1 페어링이 되는 컬러파렛트를 만들어 라이트/다크 테마를 맞춰보았다. 아래 이미지는 실제 라이트/다크 모드의 토스 증권 화면이다. 우선 backgroun..

https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com *2022년 12월 19일 업데이트 기본적인 시스템 아이콘은 material icon을 사용하면 디자이너 입장에서는 화면마다 아이콘을 만들지 않아도 되며, 개발자 입장에서는 화면마다 디자인 이미지 파일을 관리할 필요가 없을거라 예상한다. 개발자는 구글의 머터리얼 라이브러리를 사용한다면 웹/앱 전부 대응 가능하다! 시스..

니모닉이란? 은행의 보안카드같은 개념이라고 생각하면 되지만.. 니모닉은 사용자 스스로가 직접 발급하고 보관하여 잃어버리지 않게 관리해야하는 12자리 또는 24자리의 단어로된 사용자 친화적인 코드이다. 은행의 보안카드는 은행이 주체이자 관리하기 때문에 니모닉과 다른점이 있다. 작년 탈중앙화 블록체인 지갑을 포스팅 했을 때, 각각의 서비스가 탈중앙화의 필수코스인 니모닉을 어떻게 사용자에게 알리고있는지 확인해봤다. 2021.07.23 - [디자인 관련] - [서비스 분석] 탈중앙화 블록체인 지갑의 니모닉에 대해서 - Use case [서비스 분석] 탈중앙화 블록체인 지갑의 니모닉에 대해서 - Use case 평소에 다양한 서비스를 이용하다 보면 로그인을 해야 진행 할 수 있는 서비스들이 많은데요, 많은 사이트..

디자인 방법론도 좋지만 정량적 데이터를 바탕으로한 디자인 개선방법도 좋은 방법인것 같다. 앞으로의 디자이너는 정량적 데이터를 다루는 사람이 될 것 같기에 강남언니 블로그 글을 바탕으로 리뷰함! https://blog.gangnamunni.com/blog 강남언니 공식 블로그 Design #Design#Abstract#Design System#Sketch blog.gangnamunni.com 1. 먼저 데이터 트래킹하는 툴을 이용해서 앱 데이터를 분석하여 사용자가 어느 화면에서 어떤 액션을 취하는지에 대해 수집한다. 2. 고객 여정맵을 제작한뒤 어떤 단계에서 가장 많이 이탈하는지 살펴본다. 3. 왜 이탈하는지, 불편한 점은 어떤 것인지 수치분석을 통해 가설을 세운다. 가설 검증을 위해 UI디자인 방법론중 ..