본문 바로가기

분류 전체보기36

피그마(Figam) 팁 : 플러그인 활용해서 Variables 스타일을 쉽게 스타일 가이드로 만드는 방법 (Variables관련 유용한 플러그인 모음) 피그마로 작업을 하면서 스타일 가이드를 보통 Local Style이나 Variables로 많이 구축합니다. 저는 Token Studio를 대체하는 용으로 Variables을 더 사용합니다. 그래서 이번 포스팅에서는 Variables로 지정된 스타일을 쉽게 스타일 가이드로 제작해 주는 플러그인에 대해서 소개해볼까 합니다. 스타일을 지정한 후 가이드로 만들려면 일일이 매칭되게 기입해야 하고 또 작업하다가 스타일을 추가하거나 변경하면 그걸 다시 변경하고 만들어야 해서 관리가 번거롭습니다. 하지만 유용한 플러그인 하나면 스타일 지정만 하고 가이드는 보다 편리하게 생성할 수 있습니다. 또 변경이 되었을 경우에도 버튼 클릭 하나로 새롭게 추가된 스타일이 자동으로 업데이트되어 생성되기 때문에 저는 플러그인을 활용합니.. 2024. 10. 31.
UIUX 디자인 방법론 : 사용성 평가의 방법과 종류별 특징 (일반 사용성 평가, 전문가평가) 사용성 평가란?사용성 평가는 서비스 디자인과정에서 산출된 프로토타입을 평가할 때 주로 사용되는 방법입니다. 주로 사용성 평가를 할 때는 실제 사용자에게 사용상황과 과업을 부여하고 수행하는 방법을 관찰하거나 사용자들이 수행하는 과정중에서 느낀 불편함 등의 의견을 들으면서 개선점을 찾습니다.사용성 평가 방식탐구형 : 주로 Lo-fi 프로토타입을 사용하여 사용자들이 어떻게 프로토타입을 사용하는지 관찰하는 방식평가형 : Mid / Hi-fi 프로토타입을 제작하여 서비스 출시전에 앱이나 웹사이트의 효율성을 평가하는 방식비교형 : 여러개의 시안, 대안 중에서 하나를 선택할 때 사용되는 방식게릴라 테스트 : 프로토타입을 특정 구간에 설치한 후 지나가는 무작위의 사람들에게서 평가를 받는 방식사용성 평가 종류별 특징 (.. 2024. 10. 24.
디자인 프로토타입(Prototype)이란 무엇인가? 유형과 특성 및 목적 알아보기 프로토타입이란?프로토타입이란 최종 제품이나 서비스를 출시하기 전에 서비스의 실행 가능성 등을 테스트할 수 있는 방법으로 사용 경험을 미리 이해하고, 분석하고, 소통하기 위한 평가 도구입니다. 보통 최종 제품 출시 전에 서비스의 특징을 재현하여 평가하고 수정하는 것을 한 사이클로 하여,  이 사이클을 반복적으로 수행하면서 사용성을 검증하고 개선합니다.프로토타입의 목적일반적으로 프로토타이핑을 수행하는 목적은 다음과 같이 크게 3가지가 있습니다.1. 아이디어 생성 : 여러 아이디어를 프로토타이핑해 보면서 새로운 아이디어를 생성하거나 문제를 해결하는 대안을 모색할 수 있다.2. 의사소통 :  프로토타이핑을 활용하면 개발자, 현업자, 디자이너와 의견을 주고받으면서 공유하는 게 훨씬 도움이 됩니다.3. 평가 : 프.. 2024. 10. 21.
UIUX 디자인 : 디자인 작업에 활용하기 좋은 디자인 원칙 3가지 UIUX 디자인은 미적인 완성도도 중요하지만 그보다 중요한 부분이 사용성입니다. 사용성이라는 측면이 어떻게 보면 되게 모호할 수 있기 때문에 디자인 원칙을 세워서 작업을 하면 확실히 도움이 되는 부분이 있습니다. 그래서 오늘은 실제 디자인 작업 시 활용하기 좋은 UX/UI 디자인 원칙에 대해서 소개하려고 합니다.작업할 때 습관적으로 또는 느낌적으로 진행하던 부분을 명확하게 개념으로 정리해서 디자인 원칙을 세워 작업을 하다 보면, 자신의 디자인에 대한 근거도 더 명확해질 수 있습니다. 특히 UI/UX 분야에 막 관심을 갖기 시작했거나 이제 막 디자인을 시작하는 주니어 디자이너분들이 디자인을 할 때 참고하기 좋은 개념 같습니다.1. 일관성의 원리일관성의 원리는 UIUX 디자인 분야에서 가장 일반적으로 적용되.. 2024. 7. 7.
피그마(Figam) 팁 : Figma로 Lottie활용해서 로딩 아이콘 만들고 파일 추출하는 방법 예전에는 로딩아이콘을 만들 때 after effect를 활용해서 만든 후에 변환하는 번거로운 작업을 거쳐서 만들었습니다. 확인해 보니 figma를 통해서도 간단한 로딩아이콘 정도는 충분히 만들 수 있어서 편리한 팁으로 제작방법을 소개해 드리려고 합니다. :)먼저 최종 결과물입니다 ㅎㅎ 간단하게 도형의 크기변형과 색상이 돌아가는 느낌을 주는 로딩아이콘을 만들어보았습니다. 아래 파일은 figma에서 작업 후 lottie 플러그인을 사용해서 gif로 추출한 이미지입니다. lottie로는 gif로도 할 수 있고 json파일로도 추출할 수 있어서 아주 유용합니다.1. Figma로 로딩 아이콘 만들기먼저 figma로 로딩으로 하고 싶은 모형을 프레임별로 나눠서 제작합니다.저는 after delay기능을 활용해서 몇.. 2024. 5. 29.
UIUX 디자인 컴포넌트 : 스낵바, 팝업, 바텀시트 모달 알림 종류별 특성 및 상황별 선택 가이드 UI화면을 구성하다 보면 사용자 행동에 대한 알림을 줘야 하는 케이스들이 발생합니다. 이럴 때 사용하는 UI가 바로 스낵바, 팝업, 바텀시트 등의 모달 UI입니다. 정해진 답이 있는 것은 아니지만, 현업에서 실제 사용하다 보면 상황별로 더 사용하면 좋은 모달 UI가 있습니다. 오늘 포스팅에서는 각 모달 UI를 사용할 때 판단기준과 사용 시 주의할 점에 대해서 알아보겠습니다.모달 UI란?모달(Modal) UI는 사용자의 행동에 대한 알림을 주는 UI로 사용자의 이목을 끌기 위해서 사용하는 화면 기법 중 하나입니다. 즉, 사용자의 이목을 끌어 해당 UI를 보게 하고 사용자의 액션을 유도하는 UI라고 할 수 있습니다. 주로 Task 수행 중에 사용자의 결정에 의해서 삭제, 동의, 결제 등이 이루어질 때 많이 .. 2024. 5. 23.
UIUX 디자인 기본 : 아토믹 디자인 시스템이란? UIUX 디자인을 하면 기본적으로 가장 많이 듣게 되는 용어가 UI화면의 기본 요소인 component입니다. 이러한 component를 만들 때 유용하게 참고할 수 있는 게 아토믹 디자인 시스템입니다. 오늘은 이러한 아토믹 디자인 시스템이 무엇인지 그리고 어떻게 사용할 수 있는지에 대해서 확인해 보도록 하겠습니다.토믹 디자인 시스템이란아토믹 디자인 시스템은 화면을 이루는 요소들을 작게 쪼개서 구분하고 필요시에 조합을 해서 사용할 수 있도록 하는 디자인 방법론입니다. UI를 레고 조각처럼 각각의 조각들로 만들고 조립해서 하나의 완성품을 만드는 것이라고 이해하시면 됩니다. 이렇게 설명하면 대부분 아토믹 디자인 시스템이 작은 단위부터 큰 페이지로 가는 선형 프로세스라고 생각하시는 분들이 많은데요 아토믹 시스.. 2024. 4. 28.
피그마(figma) 팁 : Autolayout 활용해서 인풋 콤포넌트 만들기 (Input, Label, Supporting text) 피그마를 사용해서 콤포넌트를 만들 때 가장 중요한 것은 역시나 Autolayout일 것 같습니다. 실제 UI화면을 구성할 때 UI디자이너가 가장 많이 사용하는 그룹핑 방법이지만, 아직 피그마의 사용법이나 Autolayout을 사용하는 작업 방식에 대한 개념이 잡히지 않은 분들을 위해서 Autolayout을 사용해서 인풋 콤포넌트를 만드는 과정에 대해서 설명해 보려합니다. 빠른 이해를 돕기 위해서 Google Material Guide에 나온 인풋을 그대로 만드는 과정을 영상으로 담았으니 전체 작업 과정이 궁금하시다면 아래 영상을 참고해 주세요.인풋 제작과정의 단계별 설명은 주요 액션별로 화면을 캡쳐해서 설명글과 함께 아래쪽에 상세히 포스팅해 놓았습니다. 피그마(figma)로 인풋 콤포넌트 만드는 방법 영.. 2024. 1. 5.
피그마(Figam) 팁 : 상업 무료 이용 아이콘 플러그인 사용 방법 UI화면을 디자인하다보면 필연적으로 아이콘을 많이 사용하는데요. 규모가 큰 회사라면 아이콘을 전문적으로 그리는 담당 디자이너가 따로 있지만 규모가 작다면 UI 디자이너가 아이콘까지 다 그려야하는 경우가 많습니다. 아이콘이 작아 보이지만 사실 미세한 아이콘의 차이로 UI 화면의 퀄리티가 확 달라져 보일 때가 많습니다. 이럴 때 고민없이 완성도 높은 아이콘들을 활용하면 정말 편리한데요, 게다가 상업적으로 무료라면 사용하지 않을 이유가 없겠죠. 오늘은 피그마에서 상업 무료 아이콘을 사용할 수 있도록 도와주는 플러그인에 대해서 알아보고 사용방법을 살펴보려고 합니다. 상업적으로 무료로 사용 가능한 아이콘과 라이선스가 궁금하다면 아래의 포스팅을 참고해주세요 2023.11.23 - [UIUX 디자인] - 상업적 사용.. 2023. 12. 27.

티스토리툴바