본문 바로가기
디자인 입문 강의 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.
02.26.24 TIL* (계획이 틀어지면 화가 나는 사람) 오늘 어떤 문제가 있었나요? 오늘부터 제공된 강의의 이름이 1주 차~ 6주 차라고 쓰여있어 당연히 6주짜리 코스인 줄 알고 천천히 복습을 여러 번 할 계획을 세우고 있었는데, 팀원분과 대화 중 노션과 엑셀 스케줄에는 다른 일정으로 쓰여있다는 걸 깨달았다. 알고 보니 강의의 이름만 1주에서 6주 차로 되어 있을 뿐 스케줄 자체로는 강의들을 2주 안에 마무리해야 하는 셈이었다. 이미 미니 프로젝트를 하며 노션에 중구난방 했던 내용으로 인해 화가 나 있던 차였기 때문에 이번에는 더 화가 났다. 저 강의 이름 바꿔놓는 게 뭐가 어렵다고 이걸 안 해주는 거지? 내가 이 캠프를 믿어도 되는 거 맞아? 부정적인 생각들과 감정들이 온몸을 뒤덮었다. 문제 해결을 위해 어떤 시도를 해봤나요? 문제 해결을 위해 매니저님께 .. 2024. 2. 26.
02.19-02.23.24 WIL 이번 일주일 동안 있었던 일, 내가 한 일 (Fact) 일주일 동안 미니 프로젝트를 진행하였다. 자출해서 팀장이 되었고 팀원들과 소통을 하며 자기 소개 페이지를 만드는 시간을 보냈다. 팀원들과의 소통, 협업을 중요하게 생각하며 프로젝트를 열심히 진행했다. 나의 감정적인 반응, 느낌 (Feelings) 사실 캠프측에서 제시해 준 가이드라인이 정확하지 않아서 프로젝트 진행에 난황을 겪었고, 프로젝트는 열심히 작업했지만 프로젝트가 마무리 되고 굉장히 허무해졌다. 그 상황으로부터 내가 배운 것, 얻은 것 (Findings) 가이드라인이 정확하지 않았음에도 팀원들과 적극적으로 소통하며 프로젝트를 열심히 진행한 것. 그로 인해 피그마 사용법에 대한 이해도가 매우 높아졌다. (물론 컴포넌트는 더 공부해야 하지만) 배.. 2024. 2. 23.
미니 프로젝트 팀 KTP 현재 만족하고 있는 부분 소통이 잘 되었다 앞으로도 다함께 소통을 하면 좋겠다 불편하게 느끼는 부분 내배캠에서 주시는 과제 전달 방식의 문제 젭과 피그마 함께 돌리는게 너무 버겁다 해결책 피그마를 껐다 킨다 (하지만 오래가지 않는다) 다 같이 카톡방을 만들어서 빠르게 소통했다. 2024. 2. 23.
피그마에서 마진 값 구하는 방법 마진 요소의 가장자리에 추가된 여백 원하는 요소를 클릭한 후 alt를 누른 채 값을 구하고 싶은 요소에 커서를 옮기면 두 개체의 마진 값이 나온다. 정확한 위치의 값을 알아야 할때 도움이 된다! 2024. 2. 22.
02.22.24 TIL 오늘 어떤 문제가 있었나요? 프로토타입 시현을 하는데 컴포넌트로 바꿔서 그런지 갑자기 카드가 움직여야 하는데 얼굴들만 둥둥 돌아다녔었다. 문제 해결을 위해 어떤 시도를 해봤나요? 먼저 다른 팀원이 비슷한 질문을 하러 갔었던 튜터님이 계셨어서 같은 분에게 추가 질문을 하러 갔다. 문제를 어떻게 해결했나요? 튜터님은 이번 프로젝트는 프로토타입에 집중하기보다는 컴포넌트에 집중하는 게 좋았을 것이라고 피드백을 해주셨고, 해당 문제는 찬찬히 뜯어보신 후 내일쯤 원인을 알려주시겠다고 하셨다. 문제를 어떻게 해결 할 건가요? 내일까지 기다려보려다가 궁금해서 안 되겠어! 내가 어디서 잘못한 걸까?라는 생각이 들어 피그마 파일에 들어가 전에 쓰던 프레임의 프로토타입과 얼굴이 돌아가는 프레임의 프로토타입을 비교해 보았다... 2024. 2. 22.
피그마에 폰트 가져오기 피그마에 폰트 넣는 방법 figma.com/downloads 접속 (한번만 해두면 됨) 맥용 폰트 인스톨러 다운 -> 실행 원하는 폰트 다운로드 (맥용으로!) 폰트 zip 풀어주기 -> 폰트 파일 들어가기 -> static -> 폰트 다중 선택 -> 더블 클릭 -> 서체 설치 -> 피그마 새로고침 Public 과 Web 파일 차이 1) Public 디자이너가 흔히 쓰는 폰트 2) Web 개발자와 공용으로 쓰는 폰트 otf와 ttf차이 1) otf -> 맥용 2) ttf -> 윈도우용 (공용으로 써도 되지만 폰트가 깨질 수도 있음) 2024. 2. 21.
02.21.24 TIL 오늘 어떤 문제가 있었나요? 디자인 요소에 집중을 하다가 진도가 전혀 나가지 못했었다. 이 색이 좋을까, 저 색이 좋을까? 이런 스타일이 좋을까, 저런 스타일이 좋을까? 12시부터 6시까지 계속 똑같은 고민만 하며 색과 배경 이미지만 열심히 바꾸고 있었다. 이러다가는 내일까지 마무리를 못 할 수도 있겠다는 생각이 들었다. 문제 해결을 위해 어떤 시도를 해봤나요? 팀원들과 이야기를 하며 우리가 현재 집중해야 하는 부분에 대해 상의했다. "이러다가는 우리 내일까지 기한을 못 맞출 것 같아요! 색상과 디자인은 제쳐두고, 먼저 넣어야 하는 요소들 정리 빠르게 갑시다! 튜터님에게 중간점검하기 위한 요소들만 빠르게 맞춰요!" 문제를 어떻게 해결했나요? 페이지 구성을 빠르게 마치고 나니 페이지의 문제점이 눈에 도드라.. 2024. 2. 21.

티스토리툴바