분류 전체보기
리액트 : 안드로이드 내에 쉐도우 넣기 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
린 스타트업과 애자일 방법론 정리
린 스타트업과 애자일 방법론 정리
2022.01.26이번 포스팅은 IT업계 종사자라면 자주 듣게되는 린스타트업과 애지일 방법론에 대해 간단히 정리해보았다. 추가 정보가 있다면 계속해서 이 포스팅에 업데이트 될 예정이다. 린 스타트업 린 스타트업은 아이디어를 빠르게 최소 요건 제품으로 제조한 뒤 시장의 반응을 통해 다음 제품 개선에 반영하는 전략. 짧은 시간 동안 제품을 만들고 성과를 측정해 다음 제품 개선에 반영하는 것을 반복해 성공 확률을 높이는 경영 방법론의 일종이다. 제품 개발주기를 단축하고 제안된 비즈니스 모델이 실행 가능한지 여부를 신속하게 발견하는 것을 목표로 하는 기업과 제품을 제발하는 방법론이며 비즈니스에 기반한 실험, 반복적인 제품 출시 및 검증된 학습의 조합을 채택함으로써 달성된다.린 스타트업은 과학적 접근법으로 만들어내어 스타트업을 경..
2022 디자인 트렌드 : 클레이모피즘
2022 디자인 트렌드 : 클레이모피즘
2022.01.032021 트렌드 뉴모피즘의 실패 이전 디자인 트렌드였던 뉴모피즘은 성공인 트렌드라고 보기 어려웠는데 그 이유로는 접근성을 이야기할 수 있습니다. 기존 UI 디자인에서 뉴모피즘으로 디자인을 했을 때는 시각적으로 지루하다는 것 그리고 프론트엔드에서의 받쳐줄 수 있는 기술력 부족하다는 점입니다. 실제로 뉴모피즘의 스타일은 개발 커뮤니티에서 강력한 지지자들도 있었을 뿐만 아니라 스타일을 사용/구축하기도 했었는데, 대다수 디자이너들도 대부분 이 디자인에서 흔히 볼 수 있는 플랫 디자인에 점점 지루해지는 시기였습니다. (결국 어려운 기술력, 지루함때문에 실패) 클레이모피즘이란 무엇인가? 과거 스큐어모피즘의 방식은 우리가 시각적으로 무언가를 처리하는 데 도움이 되는 동시에 친근한 표현이였다면, 이번 클레이모피즘은 푹..
회원가입 이용 약관 샘플 사이트
회원가입 이용 약관 샘플 사이트
2021.12.17회원가입 이용약관 디자인 할때, 텍스트가 필요한 것 같아서 찾다가 발견! 나만 알긴 아쉬워서 블로그에 쓰기 ! *새롭고 좋은거 찾으면 계속 업데이트 할 예정 1. moden939 http://moden939.gabia.io/bbs/register2.php 회원가입약관 | 샘플페이지 moden939.gabia.io
모달, 논모달 그리고 팝업의 차이
모달, 논모달 그리고 팝업의 차이
2021.11.16회사 업무를 진행하면서 '모달과 팝업' 차이를 그때 당시에는 누군가를 가르칠정도로 제대로 알지 못했기에 항상 갈증났었는데 이번 포스팅을 통해서 정리해볼까 한다. 결과적으로 대부분 모달을 많이 사용되고 있다. 메인 서비스와 상관이 없는 독단적인 내용이라면 팝업, 서비스를 통해서 진행되는 것은 모달이라고 부른다. 모달의 제일 큰 특징으로는 시작(진입 컨퍼넌트)하여 끝(OK, Save, Done...)을 낼 수 있으며, 모달에서 다시 제자리(메인)로 이동할 수 있다는 것이다. 이부분만 알아도 모달을 바로 알 수 있다. 구글 머테리얼 디자인에서도 모달과 논-모달의 정의를 볼 수 있는데 아래 그래프가 더 설명하기 좋을 것 같아서 가져오게 되었다. 이 그래프를 보면 또 떠오르는 질문 '논-모달은 무엇일까?'. 모달..
Zeplin : 제플린 에러 사이 간격이 나타나지 않을때 문제 해결 방법
Zeplin : 제플린 에러 사이 간격이 나타나지 않을때 문제 해결 방법
2021.10.05개발자분들에게 제일 많이 듣는 질문 중 하나인 제플린 에러! 때마침 개발자 한분에 여쭤보길래 올것이 왔다싶어서 블로그에 해결방법을 올려보려고 합니다. "아니..이거 왜 안되는거야?" 1. 궁금증 및 분노 단계 제플린에서 텍스트와 배경 사이의 거리가 궁금한건데 제대로 작동되지 않는다. 레이어를 다깨고 레이아웃 정리, 쉐도우 정리를 다 해도 계속해서 해결이 되지 않음. 제플린의 문제이기 때문에 제플린에서 해결해야된다는 생각이 들지 않는다. 분노를 잠재우고 제플린에서 해결할 수 있는 방법을 찾아보자. 2. 원하는 레이아웃을 선택 거리를 알고 싶은 주체를 선택한다. 주체를 선택이 가능하다면 다음 스텝도 가능 3. 눌린 상태에서 우클릭 선택 > 간격을 알고 싶은 레이어 Hover 여기에서 중요한건 사이 거리를 알..
고객 중심의 비지니스 프로세스 설계하기(1)
고객 중심의 비지니스 프로세스 설계하기(1)
2021.09.29제품 중심적인 관점에서 사업적인 관습은 기이 제품을 제조, 영업 그리고 서비스하는데 있어 최적화가 가능합니다. 고객 중심적인 관점에서는 기업은 이 모든 것을 다 수행되어야하지만 이러한 업무 프로세스들이 고객 중심적인 관점에서 수행이 되고 있는지도 고려해봐야합니다. 기업의 목표 : 고객을 이해하기 위해선 직원들의 경험을 바탕으로 고객 경험을 추리해라. 영업 담당자는 거래 성사를 주 목적으로 설정하여 고객의 만족한 것이 무엇인지 추적합니다. 높은 성과를 내는 마케터 중 88%는 주도적으로 고객 경험을 만들어갑니다. IT업계의 기업 리더들 역시 고객 경험을 최우선으로 생각하고 있습니다. 고객 중심적인 비지니스 프로세스는 비지니스적인 관점에서 서비스를 하기 위한 관점으로 변한다는 의미와 같습니다. 즉 개인화된 ..
구글 캘린더와 노션 연동하기
구글 캘린더와 노션 연동하기
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배의 시간을 쓰는 경향을 보이며, 비밀번호를 만들때 보안을 보다 더 약하게 ..