Moves in Design

피그마는 누구나, 시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있는 디자인 툴입니다. 통상적으로 UIUX 디자인이나 디자인 시스템을 만드는 데 쓰이지만, 기획, PPT, 애니메이션, 짤&이모지 만들기 등 무궁무진한 용도로 활용할 수 있습니다. 이러한 확장성으로 인해, 2020년 기준 피그마는 모든 UX 디자인 툴 중 가장 핫하다고 말할 수 있게 되었습니다. (https://uxtools.co/survey-2020/)

피그마의 주요 기능으로는 아래 세 가지를 꼽을 수 있습니다.

1. 강력한 UI 드로잉

벡터+비트맵+웹 툴입니다

강력한 벡터 드로잉 기능을 활용해 자유롭게 그림을 그릴 수 있습니다.

상당히 많은 이미지, 실무 파일에서도 굉장히 빠르게 작동합니다.

웹에 자동저장되기 때문에, 시스템 크래시가 발생할 일이 매우 적습니다.

고품질 UI 컴포넌트를 원툴로 만들 수 있습니다

Variants 기능을 통해 UI의 상태값을 고차원적으로 표현할 수 있습니다.

스마트 애니메이트 기능을 통해, 내가 만든 인터랙션을 라이브러리화 할 수 있습니다.

프로토타이핑 및 애니메이션을 체계적으로 활용할 수 있습니다.

원하는 목적에 응용할 수 있습니다

비주얼 요소를 빠르게 정의, 결합할 수 있기 때문에 정말 다양하게 활용할 수 있습니다. 프리젠테이션, 애니메이션, 일러스트레이션, 브레인스토밍, 태스크매니징, 이모지, 간단한 게임 제작 등의 목적으로 사용할 수 있습니다.

유용한 자료들

[Figma] 알고계셨나요? by.pigma

2020 UI&UX 스터디방 자료 by.Hyo

스터디방 규칙

공지사항

디자인 관련 질문은 채팅 앞에 [질문] 이라고 써 주세요. 질문이 묻히더라도 나중에 누구나 편하게 검색해보기 위함입니다. ex) [질문] 피그마가 무엇인가요?

이 오픈카톡방은 UIUX 디자인 스터디 내용을 주로 다룹니다. 기본적으로 관련 내용을 자유롭게 이야기해 주시되, 다음과 같은 경우 운영진의 판단 하에 제재 및 가이드가 이루어질 수 있습니다. (향후 추가 or 수정될 수 있습니다) 1. 욕설, 스팸성 홍보 2. 동일한 내용을 반복적으로, 과도하게 홍보 3. 톡방을 통해 1:1 프로필로 타인에게 불쾌한 언행을 한 경우가 다수 제보되는 경우 4. 크랙 설치법, 저작권 도용, 개인과외 등 불법적 소지가 있는 내용 5. 특정 개인, 기업을 과도하게 비방하는 경우 6. 정치, 시사 등 디자인과 관련없는 주제로 톡방이 과열되는 경우

홍보 가이드라인

홍보 목적의 글 공유시 이 가이드라인을 꼭 지켜주세요! 위반시 제재가 있을 수 있습니다.

이런 분들이 보시면 좋습니다

공개적으로 노션을 사용중인 분

노션에 브랜딩을 적극적으로 얹어보고 싶은 분

노션 페이지의 유저 데이터를 보고 싶은 분

노션에 메신저 챗헤드를 붙여 유저 피드백을 받아보고 싶은 분

우피를 도입한 이유

저는 노션을 통해 포트폴리오 페이지를 운영중입니다. 그 이유는 다음과 같습니다.

효율적으로 문서 기반 콘텐츠 작성 가능

코딩 없이 웹에 콘텐츠 작성, 배포 가능

콘텐츠 작성 후 링크를 통해 빠르게 공유 가능

업데이트 전

피그마에서 인스턴스의 레이어 이름을 자유롭게 바꿀 수 있었습니다.

Google Sheet Sync 라는 플러그인을 사용해 피그마로 구글 스프레드시트의 텍스트를 가져올 수 있었어요. 다만 피그마 텍스트 레이어와 시트 컬럼의 이름을 일치시켜 줘야 하는데요, 피그마의 컴포넌트 기능을 사용하고 있다면 그 안에 있는 텍스트 레이어의 네이밍을 바꿔야 상황에 맞게 싱크를 맞출 수 있는 것입니다.

재사용성이 높은 컴포넌트 기능을 응용하여, 복제된 인스턴스 안의 텍스트 레이어 이름을 바꾸는 것으로, 메인 컴포넌트를 하나로 유지한 채 텍스트를 여러 버전으로 관리할 수 있었습니다.

이 기능은 하나의 프로젝트를 여러가지 언어로 관리하는 데 굉장히 유용해요.

업데이트 후

Variants 라는 기능이 추가되면서, 컴포넌트의 네이밍 규칙이 바뀌었어요. 인스턴스의 레이어 이름을 바꿀 수 없게 되는 변화가 있었습니다.

안녕하세요. 버즈빌 프로덕트 디자이너 Hyo 입니다 😄 오늘은 유저 분석 툴인 Maze에 대해 이야기해 보려고 해요. 유저 리서치와 데이터 기반 UX 개선 등에 관심 있는 분들이 읽어 보시면 좋을 것 같아요.

Story

버즈빌에서는 UI툴 Figma로 회사 서비스의 프로토타입을 제작하고 전사적으로 공유하고 있는데요, 프로토타입이 고도화될 수록, 비 디자이너들의 프로토타입 활용도를 수치화할 수 있으면 더 빠르게 의미 있는 개선을 할 수 있겠다는 생각이 들어서 방법을 찾아보게 되었어요. 그러던 중, 최근 Maze 라는 유저 데이터 분석 서비스가 Figma 연동 지원을 시작했다는 이야기를 듣고 테스트해 보았어요. 그 결과의 일부를 공유합니다 🤩

Maze?

기존에 Invision, Sketch 등의 UI디자인 툴을 통해, 유저 리서치 플로우 데이터를 측정, 제공해 주는 툴이에요. 주요 기능은 크게 아래 세 스텝으로 정리해 볼 수 있을 것 같아요.

1. Prototype Link

20.02.05기준 Sketch, Invision, Figma, Marvelapp 연동을 지원해요. 오른쪽 위의 text 입력창에 프로토타입 링크를 복붙하면, 왼쪽의 example처럼 프로젝트를 생성할 수 있답니다. 계정당 프로젝트를 1개(ㅠ) 무료로 지원해요. 프로토타입 제작시 기능과 액션을 촘촘히 쌓아두었다면, 개발공수 없이 실제 지표와 굉장히 유사한 테스트 결과를 얻을 수 있을 것 같아요. 버즈빌에서는 Figma를 사용하기 때문에 전에 만들어둔 회사 프로토타입을 바로 연동할 수 있었어요. (나중에 프로토파이도 적용되면 좋을 것 같네요)

2. Blocks

질문자는 프로젝트 내에서 아래와 같은 여러 타입의 블록을 만들고 순서를 편집할 수 있어요.

Welcome Screen : 설문조사입니다 라는 요지의 첫번째 랜딩 페이지 (디폴트)

#1 Why

Without any doubt, I can tell people in the world are all different, using so many kinds of languages and characters. However, there are 10 simple characters most of the people can understand in a second - Numbers.

#2 Process

To make this video, I wanted to test out a new process; Figma - XD - After Effects. Since the component system in Figma is really powerful in making design system and UI components, I thought it could be also used in making motion graphic video. After that, I migrated all the files into XD with SVG (this pipeline might have been better using AEUX) to safely integrate them into After Effects. As a result, the test with these tools were successful. It took me less than 40 hours from brainstorming to the final output.

#3 Outro

The main purpose of this project was simple - making an easily-understandable motion video, which led me to interpret the world's most common language into motion. I hope most of you enjoyed it no matter where you came from.

아직 공식적으로 지원하진 않지만, 커스텀 도메인도 활용할 수 있어요

Portfolio Study - Hyo

노션 브랜딩 GIF 프로세스 정리

노션으로 포트폴리오 블로그를 제작할 계획을 짰을 때, 바로 커스텀 도메인에 대한 고려를 시작하게 되었다. 물론 노션에서 페이지별로 공유를 위한 링크를 제공해 주기는 하지만, 내가 공개하는 모든 페이지에 notion.so 가 노출되는 것보다는, 내 도메인을 띄워 셀프 브랜딩에 힘을 주고 싶었다.

Research

가장 먼저 노션에서 커스텀 도메인 기능을 지원하는지 알아보았다.

2019.9월 노션에서는 공식적으로 커스텀 도메인을 지원해주고 있지 않았다. 어차피 도메인 구매 시점은 노션 포트폴리오가 어느 정도 완성되는 시점이 될 것이라, 조금 기다려보기로 했다.

2020.2월 블로그 콘텐츠와 관리 인프라 셋업을 완료했으나, 노션에서는 여전히 해당 기능을 공식적으로 제공하고 있지 않았으며, 구체적 타임라인도 나와 있지 않았다. 그래서 다른 사람들이 노션 페이지에 커스텀 도메인을 붙인 workaround 를 알아보기로 했다.

Process

앞서 적어두었듯, 도메인 구매는 웹사이트 콘텐츠가 어느 정도 구축된 이후에 적용할 계획이었다. 2020년 2월에 슬슬 커스텀 도메인을 붙여도 될 것 같다고 판단해, 자세히 알아보게 되었다.

2020.2.16 커스텀 도메인 구매 완료 (sanghyo.xyz)

잘 찾아보면 도메인 구매 시 업체별 할인 쿠폰을 찾을 수도 있으니 결제 직전 꼭 검색해 보는 것을 권장한다. 내가 참고한 검색 키워드 → LINK

노션에 커스텀 도메인 실제 적용을 위해, 다른 사람들의 후기와 How-to 블로그 등을 검색해 보았다. 생각보다 여러 사람들이 시도한 결과를 볼 수 있었다.

앞의 두 글을 참고해, 이하의 과정을 수행했다.

클라우드플레어 회원가입

저는 스타트업 버즈빌에서 프로덕트 디자이너로 일하고 있는 이상효라고 합니다👋 연말 연시를 맞이해, 제 2019년을 디지털 캘린더로 회고해보기로 했어요. 이유는 다음과 같습니다.

셀프 캘린더 이용에 커다란 레벨업이 2019년에 있었기 때문

나처럼 잘 몰랐던 분들에게 체계적인 일정 관리법을 공유

이미 수행한 일정이 대부분이기 때문에, 실제로 뭘 했는지 파악이 용이해서

캘린더 이용법 레벨업

2015-2018

저는 2015년부터 맥북과 아이폰을 사용했고, 서로 동기화가 잘 되는 맥북 캘린더를 사용하는 일에 익숙한 편이었어요. 캘린더에 날짜를 메모해 두고 알람 설정만 기본으로 해 두면, 그날 아침에 동기화된 아이폰에서 일정을 알려주는 것 자체가 좋았어요.

그치만 지금 와서 생각해 보니, 2018년까지 저는 캘린더를 To-do list 처럼 썼던 것 같아요. 큰 체크리스트는 메모했지만, 캘린더를 보고 언제 무슨 일을 진행할 지 등의 구체적인 일정을 바로 파악하기는 어려웠어요.

맥북 캘린더는 시간 설정을 하지 않으면 기본적으로 오전9~10시로 일정이 잡히기 때문에, 단순 일별 메모장처럼 사용하면 아래와 같은 그림이 그려집니다.

2019

2019년 12월 정도 되니, 엄청 복잡해진 일주일의 일정이 보이네요...😂 아래는 이전과 달라진 점이에요.

지도를 앱에서 확인하기

구글맵 오픈

하단바 저장됨 클릭

우측 상단의 지도 탭 클릭

송리단길 맛집지도 클릭

색상 범례

빨강 = 매우 추천

노랑 = 추천

파랑 = 일반