본문 바로가기

프로덕트 디자인 이야기

(4)
[피그마(Figma)] 시작하기, 피그마 다운로드 1. 피그마 가입 및 다운로드 피그마는 피그마(Figma)란 무엇인가요? 디자인 툴의 역사에서 설명했듯 웹 기반의 UI 디자인툴이기 때문에 웹에서 사용할 수도 있고, 앱을 설치해서 사용할 수 있습니다. 개발자의 경우 시안을 받아 확인하는 용으로 사용하기 때문에 피그마 웹 사이트에서 가입만해도 되지만, 자주 사용하는 디자이너라면 앱을 설치해서 사용하는게 훨씬 편합니다. 따라서 구글 아이디 혹은 이메일로 가입 후 피그마 다운로드 링크에서 각 OS에 맞는 설치 프로그램을 다운받아주세요. 2. 팀 만들기, 협업자 추가하기 앱을 켜고 위와 같은 화면이 보인다면 이제 서비스 이용이 가능합니다. 초보자가 참고할만한 샘플 파일들이 들어있네요. 튜토리얼을 따라 팀명을 입력하고 팀을 생성해주세요. 개인적으로 이용하는 분이..
[UI디자인] 디자인시스템은 무엇인가요, 디자인시스템이 필요한 이유 디자인시스템은 무엇인가요? 디자인시스템은 기본적으로 앱 화면을 구성하는 폰트부터 컴포넌트 요소들((버튼, 아이콘 등))의 규칙을 정의하는 것을 말합니다. 쉽게 예를들어 설명하자면, 본문의 폰트 사이즈와 타이틀 사이즈는 몇으로 사용할 것인지부터 버튼 GUI와 상태 값(기본, 호버, 클릭) 스타일을 정하는 것이죠. 구글에서 제공하는 머터리얼 디자인(material design)과 애플에서 제공하는 ios디자인 가이드가 전 세계적으로 통용되는 디자인가이드라고 할 수 있는데요. 많은 디자이너들이 이를 참고하여 각 서비스에 알맞게 변형하고, 추가하여 시스템을 구축하곤 합니다. 디자인시스템이 왜 필요한가요? 그렇다면 디자인시스템은 왜 필요할까요? 앱 화면을 만들 때마다 각 화면에 어울리는 디자인을 하면 안되는걸까요..
피그마(Figma)란 무엇인가요? 디자인 툴의 역사 프로덕트 디자이너라면 누구나 들어봤을 디자인 툴, 피그마(Figma)에 대해 이야기해보려고 합니다. 지금은 앱 디자인을 한다고 하면 가장 먼저 피그마를 떠올리는데요. 처음부터 프로덕트 디자인 툴로 피그마가 시장을 선두했던 것은 아닙니다. 제가 앱 디자인을 처음 공부할 때만 해도 2014년 즈음에는 스케치 툴 (Sketch Tool) 이 강세였는데요. 스케치는 벡터 기반의 UI 프로토타입 그래픽 툴이며, 제플린(Zeplin)이라는 플러그인을 이용해 개발자와 시안을 공유하곤 했습니다. 웹과 연동이 가능하고 다양한 플러그인이 있다는게 스케치의 장점이라고 볼 수 있습니다. 하지만, 치명적인 단점이 있는데요. 스케치 툴은 맥 기반의 os에서 제공하는 툴로 윈도우 환경에서는 사용할 수가 없습니다. 또 유료 구독비..
[프로덕트 디자이너가 하는 일] GUI디자이너, UI디자이너, UX디자이너, 프로덕트 디자이너의 차이 직업이 뭐냐고 묻는 질문에 나는 항상 앱을 디자인한다고 한다. 사실 나의 직업은 프로덕트 디자이너이지만, IT 업계 종사자가 아니면 앱 디자이너, 웹 디자이너, UI/UX 등 그 차이를 구분하기 어렵기 때문이다. 덧붙여 설명하기 힘들 때, 앱을 디자인한다고 하면 느낌적인 느낌으로 이해한다. 그런데 얼마 전, 친구가 회사에서 웹디자이너를 뽑는데 내가 하는 일과 뭐가 다르냐는 질문을 했다. 이 질문이 내가 글을 쓰게 된 이유이다. 앞으로 같은 질문을 하는 사람에게 이 글을 보여줄 계획이다. 프로덕트 디자이너(Product Designer)는 무슨 일을 하나요? 스마트폰을 보급화되면서 앱이 생겨나던 때만 해도 프로덕트 디자이너보다는 GUI / UI / UX 디자이너를 채용하는 회사들이 많았고, 화면 하나를 디..