본문 바로가기

UIUX 3기 사전캠프+본캠프44

디자인 입문 강의 4주차 숙제(피그마 프로토타입 연습하기) 이번 숙제는 주어진 자료로 제시된 프로토타입을 구현해보는 숙제이다. 먼저 강의를 통해 배운 기능을 정리해보겠다. 프로토타입에는 여러 기능이 있지만 이번 강의에서는 버튼을 클릭했을 때 화면이 이동하는 기능만 다루었다. Natigate to A에서 B로 연결해둔 이미지로 넘어간다. Back A에서 B로 온 상태일때 Back 프로토타입 기능을 쓰면 A로 넘어간다. 다시 돌아가야 하는 A이미지에 직접 연결하지 않고 [B 선택 -> interaction + -> back 선택] 하면 전 화면으로 돌아간다. 이때 A에서 B로 갈때 설정 해둔 애니메이션의 종류가 자동으로 적용된다. 예시) A에서 B로 가는 인터렉션 추가 (dissolve 선택) -> B에서 X버튼 누르면 back되는 인터렉션 추가 (dissolve.. 2024. 2. 28.
디자인 입문 강의 3주차 숙제(테스트케이스 작성, 디자인 QA 이슈 공유) 이번 숙제는 뱅크샐러드 앱의 회원가입/로그인 과정에서 휴대폰 본인인증 화면에 대한 QA를 한다는 가정하에 테스트케이스를 작성하고, 튜터님께서 제공해 주신 디자인 QA 예시로 발견한 이슈를 공유하는 과정과, 엔지니어에게 발견한 이슈를 글로 공유하는 연습을 하는 숙제이다. 이번에도 숙제를 하기에 앞서 테스트케이스와 디자인 QA에 대해 먼저 정의를 하려고 한다. UX/UI 디자이너는 제품팀, 엔지니어, PM, 개발자 등 여러 분야의 사람들과 협업을 하며 일을 한다. 제품에 문제가 생겨 수정사항이 필요할 때 다른 팀에게 자료를 넘겨주는 과정이라 매우 중요하다. 이미지로 제공하는 부분도 중요하고 글로 공유하는 부분도 매우 중요하다. 이번 숙제는 이런 과정을 연습하는 숙제이다. QA란? Quality Assura.. 2024. 2. 27.
디자인 입문 강의 2주차 숙제(디자인씽킹을 통한 스카이스캐너 개선 아이디어) 이번 숙제는 공감하기, 문제 정의하기, 아이디어 발산하기 단계를 이용해 스카이스캐너 앱의 홈 화면을 개선해 보는 과제이다. 공감에서는 Empathy Map, 정의에서는 5 whys, 아이디어 단계에서는 Scamper를 사용한다. 본격적으로 시작하기에 앞서 Empathy Map, 5 whys, Scamper에 대해 먼저 정의해보려 한다. 디자인씽킹이란? 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크 중 하나 디자인씽킹의 단계 설명 팀빌딩->공감하기->문제 정의하기->아이디어 발산하기->프로토타입 만들기->테스트하기 디자인씽킹의 "공감하기" 단계란? 인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계이다. 회사는 제품을 만들고, 사용자가.. 2024. 2. 27.
디자인 입문 강의 1주차 숙제(자주 사용하는 앱 UI 분석) 내가 요즘 자주 쓰는 슬랙 앱 화면의 UI를 연구해 보았다. 첫번째 찾은 UI는 글쓰기 버튼이다. Floating action buttons (플로팅 작업 버튼) 화면에서 가장 일반적이거나 중요한 작업에는 FAB를 사용합니다. FAB의 아이콘이 명확하고 이해하기 쉬운지 확인합니다. 콘텐츠가 스크롤될 때 FAB가 화면에 유지되도록 합니다. 세 가지 크기: 작은 FAB, FAB, 큰 FAB 다음과 같은 작업에는 FAB를 사용하지 마세요. 보관처리 또는 휴지통 경고 또는 오류 텍스트 자르기와 같은 제한된 작업 도구 모음에 더 적합한 컨트롤(예: 볼륨 또는 글꼴 색상을 조정하는 컨트롤) Meterial Disign 사이트에서 제시하는 FAB의 요건 FAB 는 Container 과 Icon 으로 이루어져 있다. .. 2024. 2. 27.
피그마에서 마진 값 구하는 방법 마진 요소의 가장자리에 추가된 여백 원하는 요소를 클릭한 후 alt를 누른 채 값을 구하고 싶은 요소에 커서를 옮기면 두 개체의 마진 값이 나온다. 정확한 위치의 값을 알아야 할때 도움이 된다! 2024. 2. 22.
피그마에 폰트 가져오기 피그마에 폰트 넣는 방법 figma.com/downloads 접속 (한번만 해두면 됨) 맥용 폰트 인스톨러 다운 -> 실행 원하는 폰트 다운로드 (맥용으로!) 폰트 zip 풀어주기 -> 폰트 파일 들어가기 -> static -> 폰트 다중 선택 -> 더블 클릭 -> 서체 설치 -> 피그마 새로고침 Public 과 Web 파일 차이 1) Public 디자이너가 흔히 쓰는 폰트 2) Web 개발자와 공용으로 쓰는 폰트 otf와 ttf차이 1) otf -> 맥용 2) ttf -> 윈도우용 (공용으로 써도 되지만 폰트가 깨질 수도 있음) 2024. 2. 21.

티스토리툴바