때때로 글을 씁니다
피그마는 누구나, 시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있는 디자인 툴입니다. 통상적으로 UIUX 디자인이나 디자인 시스템을 만드는 데 쓰이지만, 기획, PPT, 애니메이션, 짤&이모지 만들기 등 무궁무진한 용도로 활용할 수 있습니다. 이러한 확장성으로 인해 2020년 기준 피그마는 모든 UX 디자인 툴 중 가장 핫하다고 말할 수 있게 되었습니다. (https://uxtools.co/survey-2020/)
피그마의 주요 기능으로는 아래 세 가지를 꼽을 수 있습니다.
1. 강력한 UI 드로잉
벡터+비트맵+웹 툴입니다
강력한 벡터 드로잉 기능을 활용해 자유롭게 그림을 그릴 수 있습니다.
상당히 많은 이미지, 실무 파일에서도 굉장히 빠르게 작동합니다.
웹에 자동저장되기 때문에, 시스템 크래시가 발생할 일이 매우 적습니다.
고품질 UI 컴포넌트를 원툴로 만들 수 있습니다
Variants 기능을 통해 UI의 상태값을 고차원적으로 표현할 수 있습니다.
스마트 애니메이트 기능을 통해, 내가 만든 인터랙션을 라이브러리화 할 수 있습니다.
프로토타이핑 및 애니메이션을 체계적으로 활용할 수 있습니다.
원하는 목적에 응용할 수 있습니다
비주얼 요소를 빠르게 정의, 결합할 수 있기 때문에 정말 다양하게 활용할 수 있습니다. 프리젠테이션, 애니메이션, 일러스트레이션, 브레인스토밍, 태스크매니징, 이모지, 간단한 게임 제작 등의 목적으로 사용할 수 있습니다.
피그마란?
UIUX
design
blog
figma
2021년 기준, 이 내용은 해결되었습니다.
2020년 10월 말, 피그마는 Variants 라는 아주 유용한 기능이 포함된 업데이트를 진행했는데요, 좋은 점이 굉장히 많은 기능입니다(아래 영상을 참고해 주세요).
하지만, 이 문서에서는 그로 인해 발생한 부작용에 대해 다루고자 합니다.
구글 시트 플러그인의 사용성이 상당히 떨어지게 되었어요. 이 플러그인을 사용하지 않았던 분들에게는 부작용이 크게 와 닿지 않을 수 있습니다.
Google Sheet Sync 플러그인을 모르는 분들을 위해 링크를 첨부합니다https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync
업데이트 전
피그마에서 인스턴스의 레이어 이름을 자유롭게 바꿀 수 있었습니다.
Google Sheet Sync 라는 플러그인을 사용해 피그마로 구글 스프레드시트의 텍스트를 가져올 수 있었어요. 다만 피그마 텍스트 레이어와 시트 컬럼의 이름을 일치시켜 줘야 하는데요, 피그마의 컴포넌트 기능을 사용하고 있다면 그 안에 있는 텍스트 레이어의 네이밍을 바꿔야 상황에 맞게 싱크를 맞출 수 있는 것입니다.
재사용성이 높은 컴포넌트 기능을 응용하여, 복제된 인스턴스 안의 텍스트 레이어 이름을 바꾸는 것으로, 메인 컴포넌트를 하나로 유지한 채 텍스트를 여러 버전으로 관리할 수 있었습니다.
이 기능은 하나의 프로젝트를 여러가지 언어로 관리하는 데 굉장히 유용해요.
업데이트 후
Variants 라는 기능이 추가되면서, 컴포넌트의 네이밍 규칙이 바뀌었어요. 인스턴스의 레이어 이름을 바꿀 수 없게 되는 변화가 있었습니다.
Variants 기능의 추가로 인한 부작용
figma
blog
design
UIUX
Maze의 장단점에 대해 이야기해 볼게요.
안녕하세요. 버즈빌 프로덕트 디자이너 Hyo 입니다 
오늘은 유저 분석 툴인 Maze에 대해 이야기해 보려고 해요. 유저 리서치와 데이터 기반 UX 개선 등에 관심 있는 분들이 읽어 보시면 좋을 것 같아요.
오늘은 유저 분석 툴인 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 : 설문조사입니다 라는 요지의 첫번째 랜딩 페이지 (디폴트)
Maze 사용기
UIUX
blog
research
figma
#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.
Numbers
motion
design
figma
개인 포트폴리오 사이트로 노션 활용
계속해서 쌓여 가는 개인 포트폴리오를 노션을 이용해서 정리하기로 했어요.
노션의 장점
구축이 쉬워요.
유지 및 새 콘텐츠 게시가 쉬워요.
별도의 프로세스 없이 웹과 모바일 뷰, 다크모드 뷰를 전부 제공해요.
노션 웹사이트를 만드는 것 자체에 대한 Task Management 또한 노션 안에서 가능해요.
아직 공식적으로 지원하진 않지만, 커스텀 도메인도 활용할 수 있어요
Portfolio Study - Hyo
노션 브랜딩 GIF 프로세스 정리
노션 포트폴리오 제작 배경
blog
figma
Background
노션으로 포트폴리오 블로그를 제작할 계획을 짰을 때, 바로 커스텀 도메인에 대한 고려를 시작하게 되었다. 물론 노션에서 페이지별로 공유를 위한 링크를 제공해 주기는 하지만, 내가 공개하는 모든 페이지에 notion.so 가 노출되는 것보다는, 내 도메인을 띄워 셀프 브랜딩에 힘을 주고 싶었다.
Research
가장 먼저 노션에서 커스텀 도메인 기능을 지원하는지 알아보았다.
2019.9월 노션에서는 공식적으로 커스텀 도메인을 지원해주고 있지 않았다. 어차피 도메인 구매 시점은 노션 포트폴리오가 어느 정도 완성되는 시점이 될 것이라, 조금 기다려보기로 했다.
2020.2월 블로그 콘텐츠와 관리 인프라 셋업을 완료했으나, 노션에서는 여전히 해당 기능을 공식적으로 제공하고 있지 않았으며, 구체적 타임라인도 나와 있지 않았다. 그래서 다른 사람들이 노션 페이지에 커스텀 도메인을 붙인 workaround 를 알아보기로 했다.
Process
앞서 적어두었듯, 도메인 구매는 웹사이트 콘텐츠가 어느 정도 구축된 이후에 적용할 계획이었다. 2020년 2월에 슬슬 커스텀 도메인을 붙여도 될 것 같다고 판단해, 자세히 알아보게 되었다.
2020.2.16 커스텀 도메인 구매 완료 (sanghyo.xyz)
잘 찾아보면 도메인 구매 시 업체별 할인 쿠폰을 찾을 수도 있으니 결제 직전 꼭 검색해 보는 것을 권장한다. 내가 참고한 검색 키워드 → LINK
노션에 커스텀 도메인 실제 적용을 위해, 다른 사람들의 후기와 How-to 블로그 등을 검색해 보았다. 생각보다 여러 사람들이 시도한 결과를 볼 수 있었다.
앞의 두 글을 참고해, 이하의 과정을 수행했다.
클라우드플레어 회원가입
노션 블로그에 커스텀 도메인 삽입
research
blog