민이의 공부방

프로토타입 만들기1. 순서에 맞게 페이지를 나열한다. 2. '프로토타입'을 누른채로 화살표를 연결한다. 3. 가장 첫번째 페이지를 잡은 상태로 재생시켜 확인한다. (Fit to screen 사이즈로 설정) 인사이트 클릭하면 넘어가는 프로토타입 만들기 완성

작성중...

[ 오늘의 아티클 ] ux를 해치지 않는 팝업의 3가지 조건16화 UX를 해치지 않는 팝업의 3가지 조건 (brunch.co.kr) 16화 UX를 해치지 않는 팝업의 3가지 조건왜 우리 서비스 팝업은 사람들을 불편하게 할까? | 팝업은 디지털 환경에서 화면을 통제하고, 사용자에게 액션을 강요하는 존재다. 중요한 정보를 효율적으로 전달하는 강력한 수단이지만 남발brunch.co.kr  [ 아티클 요약 ] 팝업 : 디지털 환경에서 화면을 통제하여 사용자에게 액션을 강요하는 요소. '중요한 공지사항, 이용약관' 등의 등의 팝업을 사용하며, '과한 광고 노출, 잦은 확인, 공급자 중심의 정보, 클릭 포인트가 다른 요소, 다크패턴 팝업' 등의 팝업은 지양해야 함원버튼 확인 팝업 : 사용자가 중요한 정보를 스스로 ..

[ 카카오뱅크 디자인 클론 ] 1. 메인화면 클론 2. 핵심 서비스 클론 및 유저플로우- '이체하기' 서비스 3. 나머지 서비스 클론 및 유저플로우- '거래 상세내역' 확인 서비스 [ 인사이트 ] 이번엔 '네카라쿠배'에서 '카'를 맡고 있는 '카카오뱅크' 앱을 클론해보았다. 평소 금융 어플을 자주 쓰기도 하고, 그 중에 가장 잘 만들어졌다고 생각하는 앱으로 카카오뱅크를 선택했다. 다른 금융앱들과는 다르게 유난히 쉬워보이는 카카오뱅크. '과연 어떤 컴포넌트로 이루어져있을까?' 호기심 가득한 눈으로 뜯어보기 시작했다. 첫째, 주요버튼을 명도가 높은 노란색으로 선택하여 가시성이 높고 그 덕에 고령자도 버튼을 쉽게 찾을 수 있다. 카카오의 메인 색상인 노란색을 서비스에 잘 활용하여 사용성을 높임으로서, '확인'..

[ 오늘의 아티클 ]업무 효율을 높이는 피그마 플러그인 추천 (1)https://brunch.co.kr/@taekil/9 업무 효율을 높이는 피그마 플러그인 추천 (1)피그마의 알파이자 오메가, 플러그인을 알아보자 | 요즘IT 디자인 카테고리에서 2023년 가장 인기 있었던 글 TOP5에 들었습니다. 재미있게 봐주셔서 감사합니다 :) 정작 2022년에 쓴 글이었는데... 20brunch.co.kr  [ 아티클 요약 ] - 플러그인 : 프로그램이 지원하지 않는 기능까지 실행시켜주는 확장 프로그램- [ 피그마 플러그인의 종류 ]Content Reel (콘텐츠 릴) : 반복된 디자인이 패턴화되어 나오는 형태의 작업Meterial Design Icon (머티리얼 디자인 아이콘) : 아이콘 사용Font Scann..

[ 오늘의 아티클 ]  "결국 터질 게 터졌다" UI·UX 디자인 관점으로 본 쿠팡의 다크패턴 논란 _ 쿠팡 사태로 살펴본 다크패턴 디자인https://ditoday.com/%EA%B2%B0%EA%B5%AD-%ED%84%B0%EC%A7%88-%EA%B2%8C-%ED%84%B0%EC%A1%8C%EB%8B%A4-ui%C2%B7ux-%EB%94%94%EC%9E%90%EC%9D%B8-%EA%B4%80%EC%A0%90%EC%9C%BC%EB%A1%9C-%EB%B3%B8-%EC%BF%A0%ED%8C%A1/ “결국 터질 게 터졌다” UI·UX 디자인 관점으로 본 쿠팡의 다크패턴 논란 - DIGITAL iNSIGHT 디지털쿠팡 사태로 살펴본 다크패턴 디자인ditoday.com  [ 아티클 요약 ] - 다크패턴 : 소비자..

[ '자주 사용하는 웹 서비스 개선' 팀 프로젝트 과정 ] 웹 사이트 선정각자 개선하고 싶은 웹 사이트 선정 및 이유 정리해오기- 채민 : '네이버 블로그' 웹 사이트- 산하 : '진에어 항공' 웹 사이트- 성현 : '아디다스' 웹 사이트- 수하 : '바잇미' 브랜드스토어 웹 사이트회의를 통해 하나의 웹 사이트 선정 선정된 웹 사이트 '진에어 항공' 웹 사이트 아이디어 스케치기존 사이트('진에어 항공' 웹 사이트)의 문제점을 찾은 후 자유롭게 스케치해오기팀원들의 스케치를 바탕으로 공통점과 참고할 점 등 분석하기 피그마로 디자인공통된 문제점은, 참고할 점을 더하여 피그마에 디자인하기결과물 비교·분석하기 [ 인사이트 ] 팀프로젝트가 이렇게 재밌는건지 몰랐다. 각자 아이디어 내는 것도 재밌고, 무언가 좋은 아..

[ 내가 클론한 페이지 개선하기 ] 아이디어 스케치 개선된 디자인 Before and After1. 메인화면 개선기존 메인화면에 있는 주요 카테고리를 같은 크기로 배치시켜 4가지의 카테고리 모두의 클릭율을 높임상단에 있는 쿠폰 광고를 제거하고, 하단에 있는 쿠폰 광고를 자동 슬라이드 기능으로 바꾸어 가시성을 높임비어있는 상단에 '오늘의 주문 순위' 카테고리를 추가하여 인기있는 메뉴의 주문량을 늘리고 사용자의 고민을 줄임2. 메뉴선택 화면 개선구분선을 추가하고 기존에 있는 선의 굵기나 색상 등 구분선을 명확히 하여 가독성을 높임사이즈가 다른 메뉴의 이미지 크기를 조정함으로써 사용자의 고민을 줄이고 실패를 방지함 [ 인사이트 ]  살면서 앱 페이지를 이렇게 유심히 본 적이 없었는데, 이 정도면 배민이랑 사귄..

[ '배달의 민족' 앱 클론 디자인 ] 1. 메인화면 '홈 화면' 2. 핵심 서비스 '배달주문' 기능 3. 나머지 '검색' 기능 [ 인사이트 ] '클론'이라는 말에 '또 무얼 분석해란 말인가' 하며 당장 클론의 뜻부터 찾아보는 것부터 시작됐다. 클론은 기존의 웹이나 앱을 모방하여 따라 그리는 것을 뜻한다고 한다. 다행히도 전에 만들어놓은 '배민 컴포넌트'가 있었고, 그것에 부가 페이지들을 추가로 제작하여 앱의 UI를 손에 익힌다는 생각으로 임했다. 한 페이지 그릴 때마다 내가 봐도 완벽하단 만족감에 가족들에게 자랑하기 시작했고, 계속 칭찬받는 걸 보니 '이 길이 틀리지 않았나 보다' 하는 안도감이 들었다. 누가 봐도 캡쳐본 같으면 그것은 완벽히 성공한 클론이라는 뜻이다. 몇 개월 뒤 이 모든 UI를 클론..

[ 오늘의 아티클 ] - 월요일(공휴일) 개인 스터디Figma 사용자들이 말하는 AI디자인의 미래Figma 사용자들이 말하는 AI디자인의 미래 (brunch.co.kr) Figma 사용자들이 말하는 AI디자인의 미래AI는 정말 새로운 지평을 개척했나? | 들어가며 Andrew는 선구적인 연구 기업인 Forrester에서 7년 동안 디자인과 기술의 교차점을 분석하는 업무를 수행해왔으며, 현재 Figma의 인사이트 팀의 리더로brunch.co.kr  [ 아티클 요약 ] - 피그마 사용자들이 AI 디자인에 대한 기대와 우려, 미래에 대한 생각을 나눔.- AI의 양면성 : 대부분의 응답자가 1년 안에 AI가 큰 영향을 미칠 것이라 예상했지만, 실제로는 AI 기능을 탑재한 제품은 아직 초기 단계이며 AI가 미치는..