Moves in Design

안녕하세요, 디자이너 이상효입니다

Resume →
때때로 글을 씁니다
2022년 11월 17일에 진행된 노션 코리아 밋업 준비 과정과 관련 자료를 정리하기 위한 글입니다. 행사에 관심 가져 주셨던 많은 분들께 도움이 되기를 바랍니다.
목차

노션 코리아 밋업?

노션은 누구나 쉽게 사용할 수 있는 실시간 협업 중심의 문서 툴입니다. 노션 코리아 밋업은 원티드랩과 로티파일즈의 협업으로 성사된 행사로, 노션 직원 분들과 노션 앰베서더 분들, 그리고 정말 많은 노션 사용자 분들의 호응과 함께 이루어졌어요. 다양한 연사분들의 노션 활용 사례와 참가자 분들의 Q & A로 구성했습니다.
저는 사실 얼마 전 피그마 코리아 밋업이라는 행사를 주관했는데요. 당시 3~4주의 기간이 있었는데도 상당히 빠듯하게 준비했던 기억이 있습니다. 그런데 이번 노션 코리아 밋업에는 행사 준비부터 진행까지 불과 2주(!) 남짓한 시간이 주어졌습니다. 정말 빠르게 준비한 만큼 현실적인 어려움이 많았지만, 멋진 분들과 함께 준비할 수 있었기 때문에 성황리에 마무리할 수 있었던 것 같습니다. 특히 이번 밋업을 제안 주신 로티파일즈의 사업개발 매니저 모니카님이 적극적으로 협업해주신 덕분에, 노션 커뮤니티 매니저분을 포함해 총 5명의 연사분들의 섭외, 세션 시간 안배부터 다양한 디자인 및 굿즈 준비, 영상팀 섭외 및 행사 녹화, 그 외 다양한 행사 당일 트러블 슈팅 등 디테일한 부분을 함께 챙겨갈 수 있어서 좋았습니다. 행사는 롯데타워에 입주해 있는 원티드랩의 선라이즈 라운지에서 이루어졌는데요. 멋진 라운지에서 밋업을 진행했기 때문에 행사가 더 빛날 수 있었던 것 같습니다.
노션 코리아 밋업 후기
blog
2022년 10월 진행된 피그마 코리아 밋업 관련 자료를 정리하기 위한 글입니다. 행사에 관심 가져 주셨던 많은 분들께 도움이 되기를 바랍니다.

피그마 코리아 밋업?

피그마는 디자이너 중심의 실시간 협업 툴입니다. 피그마 코리아 밋업은 피그마와 피그마 한국 커뮤니티, 원티드랩의 협업으로 성사된 행사로, 다양한 피그마 커뮤니티 사용자 분들과 여러 배움을 나누려는 취지로 기획된 행사였어요. 여러 회사의 피그마 활용 사례와 참가자 분들의 Q & A로 구성했습니다.

Intro

2022년 광복절 연휴를 맞아 오랜만에 베트남으로 장기 휴가를 다녀왔습니다. 이번 여행의 목적은 크게 세 가지였는데요, 이번 글에서는 키워드와 간단한 설명 위주로 기록해 보려고 합니다. IT관련 내용이 조금 포함되어 있습니다.

1. 리프레시하기

저는 평소에 디자인 일이나 개인 프로젝트 위주로 낮 시간을 보내고 있습니다. 이번 휴가 기간에는 리프레시를 위해 기존에 하던 것을 최대한 안 하려고 했습니다. 업무 관련 메신저나 디자인 툴 등을 최대한 멀리했고, 베트남 현지에서만 할 수 있는 활동 위주로 진행했습니다.
•
마사지
•
쿠킹클래스
•
워터파크
•
그랩
•
구글맵 타임라인

2. 휴양하기

느긋하게 보내는 시간을 최대한 많이 가지려고 노력했습니다. 함께 간 친구가 미리 좋은 곳 리서치를 열심히 해준 덕분에, 한층 풍성하게 휴양하고 온 것 같습니다. 베트남은 한국에 비해 물가가 저렴하기 때문에(체감상 1/3~1/2 수준) 큰 부담 없이 다양한 것들을 즐기고 왔습니다.
•
느슨한 계획
•
수영장
•
베트남 음식과 커피
베트남 여행기
blog

Config 란?

디자인 툴 회사인 피그마에서 매년 주최하는 디자인 컨퍼런스입니다. 다양한 연사들이 UX에 관련된 이야기부터 디자인 시스템 이야기, 여러 제품 디자인 사례가 라이브로 진행되었습니다. 이번에는 개인적으로 컨피그를 보며 느꼈던 점, 이때 소개된 피그마 주요 업데이트에 대해 다뤄 보겠습니다.

좋았던 점

오프닝 키노트에서 발표한 피그마 업데이트가 무척 흥미로웠습니다. 십수개의 커다란 업데이트가 있었고, 아래에서 이 내용을 좀 더 상세하게 다루겠습니다.
확실히 해를 거듭할수록 연사 섭외 스케일이나 다루는 주제의 범위도 넓어지는 것 같았습니다. 다양한 나라에서 연사를 섭외한 부분도 좋았어요. 다양성과 접근성(Accessibility) 에 크게 신경쓰고 있다는 인상을 받았습니다.
웨비나 페이지에 실시간 채팅 기능을 붙여둔 것도 재밌었습니다. 특히 전 세계의 모든 디자이너들이 수다떠는 모습을 보면서, 함께 듣고 있다는 인상이 더 강하게 느껴졌고, 이런 현장의 무드가 바이럴에도 큰 영향이 있었을 것이라고 짐작해 봅니다.
24시간 동안 진행해 내가 원하는 시간대의 세션을 골라서 들어볼 수 있다는 점도 좋았습니다.
세션 내용이(언제나 그렇듯) 대체로 매우 알차게 준비되어 있어서 좋았습니다. 이런 컨퍼런스를 무료로 방구석에서 볼 수 있는 세상에 살고 있어서 즐겁네요.
키노트를 포함한 피그마 측에서 주도한 세션에서는 새로운 기능에 대한 상세한 온보딩성 내용뿐 아니라 위트도 확인할 수 있었습니다.
특히 오토 레이아웃 4를 디자인한 과정이 무척 흥미로웠는데요, 피그마가 디자인을 대하는 관점, 디자이너들을 어떻게 바라보고 있는지까지도 간접적으로 알 수 있어서 좋았습니다.
Config 2022 후기
figma
blog

시작하기 전

피그잼은 아래와 같은 생각을 하고 있었던 분들이 매우 좋아할 툴입니다.
 이거... 내 이야기인지 점검해볼까요?

구성원 모두가 동시에 사용할 수 있는 온라인 화이트보드 툴

온/오프라인 모두가 한 곳에서, 효율적으로 워크샵을 진행할 수 있습니다.
피그마는 좋은 툴이지만, 모두가 항상 디자이너처럼 에디터 권한을 가질 필요는 없습니다. 회사가 내야 하는 비용도 크고, 디자이너가 아니라면 개인의 사용 빈도도 낮기 때문에 오버스펙일 수 있습니다.
2022년 1월까지는 누구나 무료로 이용할 수 있습니다. 책정된 가격 또한 피그마에 비해, 브레인스토밍 관련 경쟁사에 비해 매우 저렴한 편입니다. (1인당 한달 3~5불)
디자인 관련 기능이 단순화되어 있습니다.
피그마는 좋은 툴이지만 모두가 디자이너만큼 잘 다뤄야 하는 것은 아닙니다. 디자이너가 아닌 모든 구성원이 참여할 수 있도록 복잡한 디자인 관련 기능을 많이 덜어낸 듯한 툴입니다.
이는 디자인 관련 지식이 적더라도 아이디어를 구체화하고 실시간으로 공유하는 데 집중할 수 있도록 만들어줍니다. 누구라도 한 시간 정도만 실습해 보면, 아이디에이션에 필요한 관련 기능을 빠르게 익히고 활용할 수 있습니다. (포스트잇, 스탬프, 화살표 등)
직관적인 기능을 통해 화살표나 도형을 쉽고 빠르게 만들고, 나만의 플로우차트를 빠르게 그려볼 수 있습니다.
피그잼이란?
figma
UIUX

9월

미라클 모닝을 하고 있습니다. 아침 일찍 카페에 가서 일단 노트북을 켜고 작업하는 것이 목표입니다. 지인들 한두 분을 끌어들여 어찌어찌 20일을 채우긴 했는데, 항상 목표한 대로 작업 분량을 달성하기는 어려운 것 같습니다. 그래도 아침 일찍 일어나야 하니, 생활 패턴이 좀 더 건강하게 바뀐 것 같은 느낌이 듭니다.
카페에 가서는 의식적으로 개인 작업을 하기 위해 노력합니다. 현재 책을 쓰고 있는데, 확실히 미라클 모닝을 시작한 후부터는 꾸준히 진도가 나가고 있습니다.
하지만 거의 평일 내내 미라클 모닝을 2시간씩 하는데도, 목표한 것만큼 분량이 쑥쑥 뽑히지는 않는 것 같습니다. 목표는 9월 말까지 초고를 마무리하는 것이지만 연장이 불가피할 것 같습니다. 이렇게까지 했는데도 기한을 못 지키는 경험은 처음이라 담당자님에게 매우 죄송한 마음입니다. 책 쓰시는 분들 모두 존경합니다.
책은 프로덕트 디자인에 관한 내용입니다. 실무에서 어떤 방식으로 UI를 디자인하는지 제 경험에 기반해 예시 서비스를 함께 만드는 방식으로 쓰고 있는데, 앱을 디자인하며 내가 하는 행동을 하나하나 설명한다는 것이 상당히 오래 걸리는 일이라는 것을 간과했던 것 같습니다. (제 미숙함으로 인해 예상 출판 타임라인을 계속 수정해야 하는 담당자님에게 심심한 사과의 말씀을 드립니다)
프로덕트 디자인을 '피그마'라는 디자인 툴을 배우며 실습하는 방식으로 집필 중인데, 이 피그마가 너무 일을 잘한다는 사실을 간과했습니다. 2~3번 대규모 업데이트로 인해 초반 내용 설명에 들어간 스크린샷을 모두 대체해야 하는 이슈도 발생했습니다. 한 명의 유저로서 좋은 업데이트를 마냥 반길 수만은 없게 된 것 같아 기분이 묘합니다.

10월

계속해서 책을 쓰고 있습니다. 어느덧 60% 이상 집필을 완료한 상태입니다. 직장에서 이야기가 잘 되어 책의 내용을 활용해 내부 구성원을 교육할 수 있게 되었는데요, 이에 그치지 않고 교육 영상 녹화본의 일부를 책에 활용하는 등의 협의도 이루어졌습니다. 나중에 수업 영상을 책과 함께 활용하면 시너지가 날 것 같아 뿌듯한 마음입니다. 출판사와 협의 끝에 최종 마감 기한을 올해 말까지로 정했습니다. 지금까지 썼던 내용을 조금씩 보강할 수 있게 되었습니다.
쓰기 전에는 당연히 아는 내용이라고 생각하는 어젠다도 막상 글로 쓰려다 보니 내가 맞는 어휘를 사용하고 있는지, 정확하게 설명하고 있는 것인지 의심하게 됩니다. 이를 한 번 더 검증하기 위해 계속해서 검색하고, 아는 내용도 한 번 더 찾아보며 쓰다 보니 오히려 스스로 더욱 많이 배우게 되는 것 같습니다. IA, 애자일, 유저 세그먼트 등 중간중간 UI 디자인 외적인 용어도 설명하게 되는데, 대충 알고만 있던 것을 쉽게 풀어 설명하려니 더 고민하게 되었던 것 같습니다. 독자분들이 이해하기 쉬운 글이었기를 바라봅니다.

11월

아직도 미라클 모닝을 하고 있습니다. 1일째부터 글 쓰러 간 카페 사진을 찍으며 횟수를 기록하고 있는데, 최근 60일을 넘겨 뿌듯한 마음이 듭니다. 처음 시작했을 때보다 게을러져 한 번에 작업하는 시간이 1시간~1시간 반 정도로 줄었지만, 이제는 정말 아침에 책 쓰는 것이 습관이 된 것 같습니다. 어느새 책의 초고는 90% 정도 완성되었고, 오랜 시간 책을 쓰다 보니 이제는 빨리 이 프로젝트를 완성하고 다른 것을 하고 싶은 마음도 듭니다. 하지만 아직 마무리가 남았으니, 끝날 때까지 나름대로 최선을 다해 보려고 합니다. (책은 내년 상반기 출시, 올해까지 1차 초고를 완성해 출판사에 공유하는 것으로 목표를 수정해 달리고 있습니다)
이 글은 2021년 10월 8일 피그마가 주최한 디자인 시스템 컨퍼런스, 스키마의 일부 내용을 노트테이킹한 것입니다. 의역, 오역, 졸림이 묻어있을 수 있습니다.

Intro

2명의 사회자 소개 : Figma Advocates 란? 피그마를 너무 좋아하게 되어 다른 디자이너들이 피그마를 잘 쓸 수 있도록 도와주는 직무
디자인 시스템은 피그마라는 제품을 만들 때 가장 중요한 키워드라고 봐도 과언이 아님.

1997

눈을 감고 97년에 있다고 생각해보세요. 스파이스걸이 미국에서 엄청 유행할 때입니다. 대다수의 사람들이 웹사이트도 없던 시절이고, 페이스북이나 구글도 없고, CSS는 이제 막 태동하기 시작했어요. 회사를 위한 랜딩페이지가 생기고 있었어요. 모바일은? 아이폰도 안드로이드도 없었습니다. 이때부터 모든 게 시작됐어요.

비전

페이지메이커 라는 걸 상상하기 시작했습니다.

HTML = Postscript아닌가요?

사람들은 포스트스크립트로 코드를 써서 그림을 그리거나, 다이어그램을 만들고 그랬어요. 하지만 어도비일러스트레이터 등 더 자유도가 높은 여러가지 툴이 생겨나고 있을 때, 포스트스크립트를 계속 발전시키는 것은 의미가 없었어요. 사람들은 이런거 다 일러로 만들 수 있는데, 이걸 왜 코드로 만들어야 하냐고 했죠. 우리는 좀 다르게 생각했어요.
무언가를 그리고, 그 내용이 전부 코드로 보존되어 있는 상태에서 html모드로 돌아가서 바로 고치고... 이런 상호작용이 교차적으로 일어나는 것을 기대했어요. 어려운 일이었지만 이게 비전이었습니다.
스키마 킥오프 스피킹
design
figma
오픈카톡 UI&UX 디자인 스터디방 관련 자료를 모아두었습니다. 상세한 톡방 규칙, 유용한 정보, 홍보 문의를 확인할 수 있습니다.
링크를 포함한 홍보글은 설문 등록 후 게재 가능합니다

유용한 자료들

by.Ash

스터디방 규칙

공지사항

디자인 관련 질문은 채팅 앞에 [질문] 이라고 써 주세요. 질문이 묻히더라도 나중에 누구나 편하게 검색해보기 위함입니다. ex) [질문] 피그마가 무엇인가요?
이 오픈카톡방은 UIUX 디자인 스터디 내용을 주로 다룹니다. 기본적으로 관련 내용을 자유롭게 이야기해 주시되, 다음과 같은 경우 운영진의 판단 하에 제재 및 가이드가 이루어질 수 있습니다. (향후 추가 or 수정될 수 있습니다) 1. 욕설, 스팸성 홍보 2. 동일한 내용을 반복적으로, 과도하게 홍보 3. 톡방을 통해 1:1 프로필로 타인에게 불쾌한 언행을 한 경우가 다수 제보되는 경우 4. 크랙 설치법, 저작권 도용, 개인과외 등 불법적 소지가 있는 내용 5. 특정 개인, 기업을 과도하게 비방하는 경우 6. 정치, 시사 등 디자인과 관련없는 주제로 톡방이 과열되는 경우

홍보 가이드라인

홍보 목적의 글 공유시 이 가이드라인을 꼭 지켜주세요! 위반시 제재가 있을 수 있습니다.
UI&UX 디자인 스터디
UIUX
design
research

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

•
공개적으로 노션을 사용중인 분
•
노션에 브랜딩을 적극적으로 얹어보고 싶은 분
•
노션 페이지의 유저 데이터를 보고 싶은 분
•
노션에 메신저 챗헤드를 붙여 유저 피드백을 받아보고 싶은 분

우피를 도입한 이유

저는 노션을 통해 포트폴리오 페이지를 운영중입니다. 그 이유는 다음과 같습니다.
•
효율적으로 문서 기반 콘텐츠 작성 가능
•
코딩 없이 웹에 콘텐츠 작성, 배포 가능
•
콘텐츠 작성 후 링크를 통해 빠르게 공유 가능
노션 페이지에 oopy 끼얹기
blog
research

오토 레이아웃이 무엇인가요?

피그마의 오토 레이아웃 기능은 여러 가지 해상도에 맞게 UI를 대응시킬 수 있는 매우 좋은 기능입니다. 다만 계속된 업데이트로 기능이 고도화되면서, 오토 레이아웃 개념을 처음 접하는 사람들이 이해하기 어려워지고 있습니다.

보면 좋은 분들

•
피그마가 왜 좋은지 잘 모르는 분들
•
피그마에 이제 막 입문하신 분들
•
피그마에 심드렁한 친구를 영업하고 싶은 분들

목적

그래서, 저는 아래와 같은 의도를 가지고 간단한 오토 레이아웃 샘플 피그마 파일을 배포했습니다.
•
오토 레이아웃의 기능을 쉽게 이해할 수 있어야 합니다
•
간단한 수정으로 오토 레이아웃이 적용된 UI템플릿을 쉽게 바꿔볼 수 있습니다
•
하나의 소스가 여러 디바이스에 적용되는 모습을 한눈에 볼 수 있습니다

프로젝트

Auto Layout Sample
UIUX
figma
design
강남언니, Pixo 편을 들으며 정리한 내용을 담습니다. 스펙트럼콘 20201128 에 방영된 내용입니다.

강남언니

강남언니가 일하는 방식 - 스쿼드와 챕터

•
Why를 묻기로 해보자! 라고 시도해 보았지만

실패사례1. OKR

•
개개인의 성장을 위해 OKR을 시도해 보자.
•
Personal OKR

실패사례2. Daily Scrum Meeting

•
팀원들이 오늘 짧게 어제 무엇을 했고 오늘 무엇할 건지 공유하는 방식
•
시도 → 망함.
•
why가 아니라 what 만 물어본다.

회고

•
망한 이유 : why 를 묻지 않아서
•
그럼 무슨 why를 물어야 하지?
스펙트럼콘2020 - 강남언니,Pixo
blog
design
2021년 기준, 이 내용은 해결되었습니다.
2020년 10월 말, 피그마는 Variants 라는 아주 유용한 기능이 포함된 업데이트를 진행했는데요, 좋은 점이 굉장히 많은 기능입니다(아래 영상을 참고해 주세요).

하지만, 이 문서에서는 그로 인해 발생한 부작용에 대해 다루고자 합니다.

구글 시트 플러그인의 사용성이 상당히 떨어지게 되었어요. 이 플러그인을 사용하지 않았던 분들에게는 부작용이 크게 와 닿지 않을 수 있습니다.

Maze의 장단점에 대해 이야기해 볼게요.

버즈빌에서는 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
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

Background

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

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

1.
노션 블로그에 커스텀 도메인 삽입
research
blog

안녕하세요,

ⓒ 2022. SangHyo Yee, All Rights Reserved.