odd-archive

인사이드 아웃의 불안이의 등장처럼  피그마에 갑자기 등장한 수상한 주황색 버튼!...config 당일날 갑자기 생성된 버튼 궁금해서 눌러봤는데 피그마에서도 이제 프레젠테이션을 할 수 있는 기능이 생겼다! Prototype Import 🧐가장 강력하다고 생각하는 기능은 프로토타입을 슬라이드에 포함하여 프레젠테이션을 보고있는 접속 유저들이 프로토타입을 테스트 해보고 투표도 할 수 있다는 것이다.이것은 구글 슬라이드도 못하고 ppt도 못하는 디자인 툴에서만 제공 할 수 있는 강력한 기능이라고 생각한다 . 더 이상 디자인 리뷰를 할 때 프로토타입을 보여주기 위한 영상을 만들거나 gif를 만들지 않아도 발표 도중에 바로 기능을 보여줄 수 있다. 또한 피그마의 동시 접속의 기능을 가져와 피그마와 동일하게 다른 유..

배민의 우아콘 일정중 제일 첫번째로 보았던 세션! 시간도 기획서도 없는 우리 회사 상황에 딱 맞는 제목이라 끌리게 되었다. 배민의 워킹그룹 ‘파티’ 유동적인 그룹구성, 상황에 맞는 의사결정, 자유로운 진행방식 그라운드 롤 정하기 (애자일 방법론 참고 변형해서 적용) 바쁘다보니 정책을 바꾸더라도 개발일정을 줄이게 됨 공유를 자주한다 의견제안을 언제든지 누구나! 킥오프 때 아이데이션 너무 많은 아이디어가 많아서 다만들기엔 시간이 부족하여 간략한 기능만 뽑아냈어야 함 직군 따라 중요하게 생각하는게 달랐음 서로가 동의하는 기능에 따라서 많은 토론끝에 mvp 기준을 잡음

오늘은 피그마에서 컬러 라이브러리를 쉽게 제작하는 순서와 라이브러리를 만들때 사용했던 유용한 플러그인을 소개하려고 한다! 1. 제품의 콘셉트에 맞는 다양한 컬러들을 정의한다 베이직 컬러의 color shade를 만들 때 일러스트의 blend 기능을 이용하였다. 물론 피그마에도 다양한 플러그인을 가지고 있지만 내가 원하는 컬러 대비에서 shade를 뽑아내는 플러그인을 아직 찾지 못했다. light - dark를 지원하는 베이직 컬러 상 shade가 너무 미묘하게 변하거나 너무 격하게 변하게 되면 컬러를 뽑아 쓰기 어려운 것 같다. 이렇게 원하는 세 가지 컬러를 뽑아 shade를 완성하였다. 2. 피그마의 rename 기능으로 한 번에 컬러칩 네이밍을 한다. 일러스트에서 만든 shade를 그대로 복사하여 피..

UI 디자인, UX 디자인, 프로덕트 디자인, 웹 디자인 IT 업계에 디자인 직무의 경계가 모호해지는 가운데 '프로덕트 디자인'이라는 직무가 떠오르고 있다 UI, UX도 아닌 프로덕트를 디자인한다는 것은 어떤 업무를 의미하는 것일까? 먼저 프로덕트 디자이너를 뽑는 여러 회사의 요건을 보면 어떻게 문제를 발견하고 해결 정성적/정량적 데이터 기반의 UX 문제를 정의 사용성 테스트, 포커스 그룹 인터뷰 경험 사용자에 대한 정량/정성적인 이해를 기반 사용자 리서치를 통해 인사이트를 발굴하고 개선 사용자 관점, 그리고 개발/제작 관점 사이에서 문제의 본질을 바라보고, 이상적인 디자인과 비즈니스 목표 사이에서 균형 있는 해결책을 제시 사용자 리서치 및 데이터 분석을 통하여 고객의 니즈, 문제와 Mentality를 ..

디자인을 할때 현재 위치 표시에 대해서 고민하던것들을 적어보려고 한다 1.헤더 - 브레드크럼 home표시와 현재 페이지 표시를 줄여라 2) 메뉴 네비게이션의 계층구조에 따라 어디에 표현될지가 편리한 UX로 이끈다. 메뉴의 구조를 잘 잡아야 사용자가 헷갈리지 않게 서비스를 사용할 수 있다. 메뉴명과 카테고리을 잘 나눠놔야 현재페이지에 대한 중복적인 표시를 막을 수 있다. https://carbondesignsystem.com/ UX Collective 블로그에서 네비게이션에 대해서 분석한 내용 1. 메인 네비게이션은 왼쪽에 둘때 많은 장점이 있다. - 사람들은 알파벳 F자의 형태로 웹페이지를 훑어보는 경향이 있어 네비게이션의 위치는 위쪽과 왼쪽에 두는것이 좋다. 2. 네비게이션을 위쪽에 두면 공간이 절약 ..

저번글에 이어 피그마의 브랜치 기능 어떻게 사용하는지 살펴 보도록 하겠습니다! branch가 뭔지 모르겠는 분들은 1편을 먼저 보고 와주세요! https://odd-eun.tistory.com/8 [figma] 피그마의 브랜치 기능?! (1) 피그마의 이력 관리 때문에 고민 중에 피그마에도 git처럼 branch 기능이 있다는 사실을 알게 되었다. 처음에는 실시간 링크로 공유하게 되니 계속 바뀌는 시안 때문에 개발에 혼선이 생기게 되었 odd-eun.tistory.com 우선 피그마의 branch기능은 Organization plan에서만 사용 할 수 있습니다. 먼저 피그마의 branch 기능을 사용하기 위해서는 branch를 생성해야합니다 . 1. 브랜치 생성하기 기본 파일에서 파일 이름 옆에 있는 버..

피그마의 이력 관리 때문에 고민 중에 피그마에도 git처럼 branch 기능이 있다는 사실을 알게 되었다. 처음에는 실시간 링크로 공유하게 되니 계속 바뀌는 시안 때문에 개발에 혼선이 생기게 되었다. 그래서 기능별로 작업이 끝날 때마다 history를 따로 저장하여 공유하였더니 링크가 너무 여러 개 생겨 어떤 링크를 봐야 하는지에 대한 불편함이 생겼다. 이렇게 불편하게 쓰고 있었는데 branch 기능이라니!!! 그럼 메인 링크만 공유하고 작업할 branch를 따로 빼서 완료했을 때만 merge 해주면 되는 건데!! 어차피 지금 피그마도 개인적으로 결제해서 쓰고 있기 때문에 Organization plan을 사용하진 못하지만 언젠가는 사용해볼지도 모른다는 희망을 가지고 피그마의 branch 기능에 대해 알..

오늘은 Dark & Light 테마 작업을 위한 color의 변수 처리에 대해서 알아보도록 하겠다. 일단 테마 작업에서 가장 중요한것은 다크 모드, 라이트 모드에서의 컬러 정의를 명확하게 하고 시작하는 것이다. 그래야 테마 전환을 했을때 어색하지 않은 화면이 나온다. 컬러 정의에 대한 것은 하단의 링크에서 자세히 설명하도록 하겠다😌 link -- 곧... 📒 테마 작업 순서 정의 1. 디자인 가이드에서 컬러정의하기 (여기서 중요한 것은 정의할 때 css에서 사용할 변수명과 동일하게 가이드 하기! ) 2. 정의한 색상들을 scss파일에 변수처리 해놓기 3. 가이드 파일에서 정의한 컬러를 피그마 라이브러리로 끌어와서 디자인 파일에서 사용하기 1. 디자인 가이드에서 컬러 정의하기 먼저 디자인 가이드에서 컬러 ..