본문 바로가기

Design

(38)
우아콘(우아한 테크 컨퍼런스) 2023 후기 우아한 테크 컨퍼런스 2023 11월 15일(수) 오전 10시 그랜드 인터컨티넨탈 서울 파르나스 오랜만에 큰 오프라인 컨퍼런스에 참여했다. 배민의 일하는 방식과 평소에 궁금했던 내용도 있어 즐거운 마음으로 들었다. 사용자 경험을 배민합니다: 배민이 사용자를 이해하는 방법 배민 리서처들은 리서치를 통해 [사용자 이해, 문제발견, 문제 정의, 문제해결] 과정에 함께한다. 비즈니스 목표와 사용자의 좋은 경험이 일치하지 않는 때도 있다. 리서치를 통해 두 가지 목표의 갭을 줄여야 한다. 주기적인 리서치를 의사결정 과정과 전사에 발표한다. 배민은 사용자의 목소리를 듣는데 많은 시간과 리소스를 들이고 있다. 배민이 이렇게 할 수 있는 동력은 리더십과 프로세스. 그리고 문화가 받쳐주기 때문이다. 문화는 일을 잘 굴러..
인프런 프로덕트 디자인 밋업 후기 인프런에서 주최하는 프로덕트 디자인 밋업에 다녀왔다. 판교까지 가서 밋업을 들은 이유는.... 소개란에 있던 이 그림을 보자마자 후킹이 지대로 되어버렸다. 요즘 '나 설마 심판자의 길에 걷고 있나?' 고민하던 차였는데, 우연찮게도 이 그림이 내 고민과 맞닿아 있기 때문. 이 밋업은 디자인 주제도 많았지만 '일이라는 것을 어떻게 잘할 수 있을지'에 대한 이야기가 많아서 좋았다. 나는 일을 잘하고 싶은 사람이라서, 일을 잘하는 사람의 이야기가 너무 재밌었다. (도파민 폭주) 기억에 남았던 이야기들 행복하게 일하고, 성장하기 위해서는? 행복하게 일하고 성장하려면 나에 대해서 알아야 한다. 나는 어떤 사람인지, 어떤 강점이 있는지, 어떻게 성장하고 싶은 사람인지 알고 전략을 짜자. 나의 성향, 커뮤니케이션 스..
개발자없이 Noto Sans 폰트 커스텀/경량화하기 * 디자이너가 폰트를 커스텀하기 위해 우당탕탕 고군분투한 내용입니다. 갑자기 커스텀을? 보통 다국어 지원을 위해 Noto Sans를 많이 사용하는데, 많은 시간이 지난 지금도 여전히 이만한 폰트가 없다. 일단 이렇게 많은 언어를 지원하면서 사용하기 좋게 다듬어진 무료 폰트가 없기에... 현 회사도 다국어 지원을 위해 Noto Sans 폰트를 사용하고 있다. A 프로젝트 (영어, 한국어) : Noto Sans KR B 프로젝트 (영어, 중국어) : Noto Sans SC C 프로젝트 (영어, 스페인어) : Noto Sans D 프로젝트 (영어, 베트남어) : Noto Sans 여기는 4개의 프로덕트에서 5개의 언어(영어, 한국어, 중국어, 스페인어, 베트남어)를 지원하고 있고 Noto Sans, KR, S..
UI 컬러시스템 RGB, HSL, HSB 알아보기 기술이 발전함에 따라 디스플레이를 통해 색상을 보는 일이 많아졌다. 당장 컴퓨터뿐만 아니라 TV를 통해서도 수많은 색상을 접한다. 이를 위해 색상 모델은 RGB, CMYK, HSB(=HSV), HSL 등 굉장히 많이 만들어지게 되었다. 디지털에서 수학적으로 색상을 표현하기 위함이다. 이 중에서 UI 디자인을 할 때 일반적으로 사용하는 모델 위주로 알아보자. RGB 포토샵에서 아트보드를 만들 때 인쇄용은 CMYK, 디지털용은 RGB로 세팅해야 하기 때문에 포토샵 사용자라면 매우 익숙한 색상 모델일 것이다. 익히 아는 것과 같이 R(Red), G(Green), B(Blue)의 혼합이며, 0~255의 값으로 표현한다. RGB모델은 정사각형의 큐브로 표현될 수있고 각 꼭지점이 가진 컬러의 좌표값으로 측정한다. ..
피그마로 SVG export했는데 리소스가 이상하다고? "컴포넌트의 상태별 SVG 소스를 뽑았는데 사이즈가 다 달라요." 어느 날, 개발자에게 이런 이야기를 들었다. 헐레벌떡 리소스를 확인해보았지만 컴포넌트는 모두 같은 사이즈였고, 그걸 상태 별로 variant 해둔 것 뿐이기 때문에 다르게 추출될 이유가 없었다. 대강 저 동그란 라디오 컴포넌트를 export한 상황이었는데 직접 해보니 정말 사이즈가 다르게 뽑혔다. 여러 테스트를 해보다 보니 두 가지 난감한 상황을 마주할 수 있었다. - SVG의 사이즈가 1px씩 틀어지는 현상 (개발자가 문의한 것) - 보더가 틀어지는 현상 SVG 사이즈가 틀어지는 케이스 내 경우에는 SVG의 height가 1px씩 틀어지는 현상이었다. 16x16 컴포넌트라면 16x17로 뽑히는 거다. 사건 현장(?)을 좀 더 명확히 보자..
GA 초급자용 애널리틱스 아카데미 -1 Google Analytics 데이터를 수집하여 유용한 보고서에 컴파일하는 플랫폼. 각 사이트 페이지에 자바스크립트 추적 코드를 추가하여야 한다. 브라우저 설정 언어, 브라우저, 기기 및 운영체제 등의 정보를 수집하며 사용자가 해당 사이트로 이동할 수 있었던 출처를 알 수 있는 '트래픽 소스'도 수집할 수 있다. 페이지가 로드될 때마다 추적 코드는 사용자 활동에 대한 업데이트된 정보를 수집하고 보낸단다. Google 애널리틱스는 이 활동을 '세션'이라고 하는 기간별로 그룹화한다. 사용자가 추적 코드가 포함된 페이지로 이동할 때 시작됩니다. 30분 동안 사용자 활동이 없으면 세션이 종료됩니다. 세션이 종료된 후에 사용자가 페이지로 다시 돌아오면 새로운 세션이 시작됩니다. 데이터가 처리된 후 DB에 저장되면..
Android Notification의 Icon 만들기 (with One Signal) Notifications 앱이 실행 중이지 않더라도 유저에게 간단한 정보를 제공할 수 있는 기능. 보통 '푸시'라고 부른다. 보통 시기적절하게 정보를 제공하는데 효과적이고 유저에게 아래와 같이 보여줄 수 있다. - 스테이터스바에 아이콘으로 보여주기 - 소리나 진동으로 보여주기 - 디바이스 LED 깜빡이기 - 현재 스크린에서 보여주기 (=헤드업 알림, Android 5.0부터) - 락스크린에서 보여주기 (Android 5.0부터) - 런처 아이콘 위에 색상 배지로 알림 표시 (Android 8.0부터) Notification Elements 1. 작은 아이콘 : 필수 구성요소 2. 앱 이름 : 시스템에서 제공 3. 타임스탬프 : 시스템에서 제공, 재정의하거나 숨길 수 있다. 4. 큰 아이콘 : 선택사항 (..
Figma에서 Data 사용하기 (Google Sheet Sync) Google Sheets Sync 작업을 하다 보면 실데이터를 넣어서 확인해야 할 때가 있다. 스케치에서는 Data 기능을 사용하면 되고, 피그마에서는 Google Sheet Sync라는 플러그인을 사용해서 작업물에 데이터를 끼얹어볼 수 있다. 사용법을 알아보기에 앞서 설치할 수 있는 링크를 공유한다. 아래 링크 말고도 Figma - Plugin 메뉴에서도 검색해서 다운로드할 수 있다. Plugin Download https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync 어떤 Data를 넣을까 컴포넌트에 어떤 데이터가 필요한 지 체크해보자. 예제로 내가 좋아하는 웹툰으로! 파란 박스 영역에는 웹툰의 썸네일을, 그리고 각 텍스..
[WCCD] Airbnb의 팬을 만드는 브랜드 캠페인 전략 Airbnb의 팬을 만드는 브랜드 캠페인 전략 손하빈 마케터 브랜드 캠페인 (Who we are, What we do) Who we are 생각과 철학을 가진 브랜드가 기억에 많이 남는다. What we do 브랜드가 제공하는 서비스, 제품, 가치를 이야기한다. 브랜드 캠페인은 브랜드의 거울이다. 이런 추상적인 개념을 알리기 쉽지 않기 때문에 브랜드 캠페인을 통해 단기적으로 이것들을 전달하는 것이다. 특정 기간, 특정 타켓에게 브랜드를 알리는 것이기 때문에 브랜딩이 없는 캠페인은 장기적인 효과를 거두기 힘들다. 에어비앤비같은 경우엔 창업자들이 워낙 잘 구축해둔 편이다. 브랜딩이 없다고 해서 브랜드 캠페인을 할 수 없는 것이 아니며 마케터가 이 브랜딩을 의사결정자들과 계속 의견 나눈다. 캠페인 진행 지붕의..
[WCCD] LINE Design System(LDS) 제작기 LINE Design System 이신혜 - 라인플러스 라인에서는 하루에 약 50억 개의 메시지가 생성되고 액티브 유저는 1억 8600만 명이다. 하나의 작은 변화라도 나비효과처럼 많은 사람들이 영향을 받는다. 그렇기 때문에 사내 디자인시스템 조직은 중심에서 각 프로덕트의 일관성을 돕고, 디자인 가이드라인을 제공하여 유관 부서의 커뮤니케이션 효율성을 높이고 있다. Bottom Tab 하단 탭은 길잡이 역할을 한다. 첫 번째 탭에서는 라인이 여러 국가에서 서비스를 하다보니 각기 다른 언어를 표현해야 해서 길이도 다르고, 내부 콘텐츠를 방해한다고 생각했다. 그래서 4년 전, 두 번째 이미지처럼 레이블을 제거해서 시각적 여유를 주고 시각적인 피로도를 낮추는 업데이트를 진행했다. 하지만 사용자의 반응이 좋지 않..