Research
피그마 팀 라이브러리 - 동기화 연결 끊기, 고스트 컨퍼넌트 삭제
피그마 팀 라이브러리 - 동기화 연결 끊기, 고스트 컨퍼넌트 삭제
2022.12.01Figma team library 피그마 팀 라이브러리 팀 라이브러리는 디자인 시스템과 같은 메인 컴퍼넌트를 만들어 둔 파일을 퍼블리싱해서 다른 문서에서 라이브러리처럼 가져다가 쓸 수 있는 기능이다. 디자인파트 조직에 있는 분들은 스케치에서 피그마로 넘어오는 이유가 제일 크지 않을까 생각하는데, 3개월 써보니 너무 편하다. 팀 라이브러리를 사용하기 위해서는 professional plan 이상으로 사용해야한다. 무료 체험을 해보고나서 무조건 써야된다고 생각해서 바로 결제 진행했다. 라이브러리 동기화? '누구냐 너.. 누가 범인이냐...' 우리 회사에서 사용하는 라이브러리는 기본 디자인 시스템과 개발 리소스를 줄이기 위한 일부 변형된 디자인 시스템을 2개로 프로젝트에 맞춰서 사용하고 있다. 두 라이브러리는..
리액트 : 안드로이드 내에 쉐도우 넣기 Shadow in React for Android
리액트 : 안드로이드 내에 쉐도우 넣기 Shadow in React for Android
2022.09.14리액트 네이티브에서 그림자 설정을 아예 못하는 것은 아니다. iOS는 웹과 비슷하게 적용할 수 있어도 안드로이드는 그렇지 못하다. 개발자를 돕기 위해(?) 찾다가 여러가지 블로그의 적용 방법을 알게 되었다. 코드도 자세히 나와서 개발자랑 소통할때 수치만 전달하면 될 것 같다 🌝 - Effect Blur : iOS 와 Android 모두 설정할 수 없음 = 라이브러리 사용해서 해결하기 ✨ 라이브러리 적용하기 npm install react-native-shadow-2 npm install react-native-shadow 출처1 : https://stackoverflow.com/questions/41320131/how-to-set-shadows-in-react-native-for-android 출처 2:..
피그마 : 디자인 시스템 텍스트 에셋 스타일 가져오기
피그마 : 디자인 시스템 텍스트 에셋 스타일 가져오기
2022.07.12스케치에서 피그마로 옮겨가는 회사가 많아지고 있어 회사에서도 피그마 도입을 고려하고 있다. 피그마의 장단점을 찾기 위해 튜토리얼 형식 느낌으로 디자인 시스템을 피그마형태로 구축하는 중인데 무료 버전에서는 텍스트와 에셋을 불러오기가 어렵다는걸 알게 되었다. 1. Assets에서 Team library 아이콘 선택 피그마 왼쪽 패널에서 에셋 항목에서 책 모양인 Team library를 선택한다. 2. libraries에서 보내고 해당 파일 퍼블리싱한다. 현 파일을 퍼블리싱할 것인지 확인 후에 누르면 끝이다. 3. 무료(개인)로 피그마를 사용하는 경우 무료로 피그마를 사용하는 경우에는 Team library 기능을 사용할 수 없다. 프로페셔널 요금 이상만 가능하다. 4. 디자인 시스템 기능별 플랜 피그마로 디..
상황 별 UI 사운드 확인할 수 있는 사이트
상황 별 UI 사운드 확인할 수 있는 사이트
2022.06.14UI 사운드가 활발히 사용하길 바라는 제작자의 생각이 느껴지는 무료 사이트 개발 코드와 함께 사운드가 제공되는 것이 특징이고 사운드도 일괄 다운받을 수 있습니다. https://snd.dev/ SND: Crafted UI sound assets for UX developers 本サイトで公開しているサウンドアセットはオーディオファイルのため、様々な開発環境に必要に応じて読み込んでご使用いただく形を想定しています。しかし、特に多くの利用を想定して snd.dev
회원가입 이용 약관 샘플 사이트
회원가입 이용 약관 샘플 사이트
2021.12.17회원가입 이용약관 디자인 할때, 텍스트가 필요한 것 같아서 찾다가 발견! 나만 알긴 아쉬워서 블로그에 쓰기 ! *새롭고 좋은거 찾으면 계속 업데이트 할 예정 1. moden939 http://moden939.gabia.io/bbs/register2.php 회원가입약관 | 샘플페이지 moden939.gabia.io
모달, 논모달 그리고 팝업의 차이
모달, 논모달 그리고 팝업의 차이
2021.11.16회사 업무를 진행하면서 '모달과 팝업' 차이를 그때 당시에는 누군가를 가르칠정도로 제대로 알지 못했기에 항상 갈증났었는데 이번 포스팅을 통해서 정리해볼까 한다. 결과적으로 대부분 모달을 많이 사용되고 있다. 메인 서비스와 상관이 없는 독단적인 내용이라면 팝업, 서비스를 통해서 진행되는 것은 모달이라고 부른다. 모달의 제일 큰 특징으로는 시작(진입 컨퍼넌트)하여 끝(OK, Save, Done...)을 낼 수 있으며, 모달에서 다시 제자리(메인)로 이동할 수 있다는 것이다. 이부분만 알아도 모달을 바로 알 수 있다. 구글 머테리얼 디자인에서도 모달과 논-모달의 정의를 볼 수 있는데 아래 그래프가 더 설명하기 좋을 것 같아서 가져오게 되었다. 이 그래프를 보면 또 떠오르는 질문 '논-모달은 무엇일까?'. 모달..
구글 캘린더와 노션 연동하기
구글 캘린더와 노션 연동하기
2021.08.24나는 무료 캘린더 앱을 사용해왔다. 사용성이 좋지도 않은데 계속해서 유료 구독을 푸시해와서 바로 구글 캘린더로 갈아탔다. 구글 캘린더를 선택한 이유는 회사에서 미팅할때 일정들이 전부 다 연동된다는 편리함 때문이였는데, 문제는 사적인 일정은 따로 구분해야된다는 점이다. 어떻게 해야될까 고민하면서 구글 캘린더를 요리조리 사용중인데, 블로그 관리는 노션에서 사용하고 있어서 이 둘의 연동이 필요했다. '구글 캘린더 노션 연동' 구글 검색시에는 무조건 노션에 구글캘린더가 연동되는 것들이 나오고 있어서 답답했다. 그러다가 찾은 구글 캘린더와 노션을 연동해주는 사이트를 발견했다. Opize로 구글 캘린더와 노션 연동 사이트 https://calendar2notion.opize.me/ Calendar2notion - ..
디자인 시스템 : 프로세스와 레퍼런스 (1)
디자인 시스템 : 프로세스와 레퍼런스 (1)
2021.08.19디자인 시스템 3요소 스타일 가이드 : 컬러, 폰트, 아이콘과 같은 디자인을 설명하는 가이드 패턴 라이브러리 : 컨퍼넌트를 활용한 패턴 등을 모아놓는 집합 시스템 가이드 : 디자인 시스템을 관리를 위한 업무 가이드 시스템 가이드 상세 정의 내용 1. Goal 2. People : 담당부서/담당자, 수정자/검토자, 접근권한이 있는 이해관계자 3. Channal : 이슈 및 파일을 공유할 채널 4. Share : 변경된 사안을 모두가 숙지하도록 고민 https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969 Everything you need to know about Design Systems → Pour la versi..
UX/UI : 회원가입 화면 디자인을 하기 위한 UX/UI 리서치
UX/UI : 회원가입 화면 디자인을 하기 위한 UX/UI 리서치
2021.05.111. 회원가입 이유를 명확하게 알려줘야한다. 사용자가 얻을 수 있는 회원가입의 이점을 설명해야한다. 2. 이탈하지 않도록 쉽게 만들어져야한다. ZERO UI를 지향한다. (Zero UI : 터치, 클릭, 타이핑과 같은 방식 이전의 목소리, 제스쳐, 눈짓과 같은 방식으로 작동하는 UI) 소셜 로그인도 여러가지 방법보다는 최대 3개 정도로 제한한다. 시간이 오래걸리지 않고 귀찮아보이지 않아야한다. 하나의 정보만 입력 가능하게 설계해야한다. - 심리적으로 입력해야할 공간이 많으면 귀찮아질 가능성이 높기 때문 비밀번호가 사용자에게 제일 큰 스트레스! 독일 뮌헨 대학교의 한 연구에 따르면 사람들이 모바일 호나경에서 비밀번호를 입력하는데 2배의 시간을 쓰는 경향을 보이며, 비밀번호를 만들때 보안을 보다 더 약하게 ..
심리학 UX : 게슈탈트 이론 Gestalttheorie
심리학 UX : 게슈탈트 이론 Gestalttheorie
2021.05.11이전 블로그에서 게시했던 게슈탈트 이론은 여러 매체들을 통해서 이론을 배웠으며 정리해왔는데, 정보가 분산되어있다보니 잘 읽지 않아서 정리 목적으로 포스팅을 해보려고 한다. 참고나 원문으로 보는 것이 더 이해하기가 쉽다. 처음에는 하나씩 번역해왔는데 굳이 할 필요가 있나 싶어서 계속 멈췄던 이론. 원문으로 보는걸 추천 게슈탈트 이론 : 모양과 형태에서 오는 용어 주로, 혼돈스럽게 보이는 세계로부터 끊임없이 얻는 데이터에 대한 의미있는 지각의 법칙을 연구하는 분야에 쓰이는 심리학. Kurt Koffka (커트 코프카) "모든 것은 부분의 합계가 아니다" 사람들은 복잡한 대상을 인식을 할 때 부분들의 집합이 아니라 전체적인 시스템 구성의 부분을 배열하는 의식적 또는 잠재적인 모드이다. 다양한 분야에서 사용되지..
알리바바그룹 디자인 시스템 Ant design 사용해본 후기
알리바바그룹 디자인 시스템 Ant design 사용해본 후기
2021.02.24Ant design을 접하게 된 것은 이직한 회사에서 사용하기 때문이다. 디자인 리소스 컨퍼넌트를 사용해서 더 심플하고 빠르게 디자인할 수 있는 방법을 찾고 노력하는 편인데, 아쉽게도 이 전 회사에서는 모든 컨퍼넌트들을 직접 만들어 사용했기 때문에 경험해보지 못했다. 이번 회사를 통해서 최소화시키는 디자인을 해볼 수 있어서 기뻤다. Ant design : 알리바바 디자인 시스템 사이트. 쉽게 말해서 bootstrap 와 같이 웹 컨퍼넌트를 지원함. 그래프를 그리는데 더 쉽게 사용할 수 있음. Ant design에서는 Sketch관련된 자료만 받을 수 있는 줄 알았는데, 위 이미지처럼 많은 것들을 제공한다. UI kit 연동이 되는건 figma, XD 이고, Sketch는 별도의 컨퍼넌트 스케치 파일을 제..
당근마켓 성장과 UX리서치
당근마켓 성장과 UX리서치
2021.02.01당근마켓이란? 당근마켓 : 주변 기반 중고 직거래 플랫폼. (직거래 외에도 로컬광고, 동네생활이라는 커뮤니티가 형성되어있음) 2019.07 MAU 300만 달성 -> 2020.04 MAU 700만 달성 사용자 층을 분석하면 빠른 성장 원인을 짐작해볼 수 있을 것. => 30~40대 여성들이 많이 거주하는 동네를 기반으로 빠르게 성장 월 활성 사용자수 1,000만명 육박 월 평균 체류 시간은 2시간 56분 당근마켓이 해결하려던 문제 지역 기반 카페(커뮤니티 모임)의 높은 진입 장벽 -> 회원가입을 위한 절차 까다로움 기존 중고거래 서비스의 신뢰성 부재 -> 중고XX의 사기거래 급상승 중고거래 특성상, 제품의 배송과 CS부담이 고객이 질 수 밖에 없는 구조를 거리상 가까운 사람과의 거래가 효율적인 것을 어필..