thinkuser 님의 블로그

제로베이스 100일차 학습노트이다.드디어 100일간의 제로베이스 UIUX 파트타임 스쿨 챌린지가 모두 끝이 났다. 100일동안 매일 같이 30분 이상 수업 수강과 그에 따른 학습 노트를 적으면서 많은 배움을 얻을 수 있었다. 일차적으로는 UIUX의 수업들을 꾸준히 들으면서 해당 직무에 대한 많은 학습을 할 수 있었고, 기초적인 학습들을 할 수 있었다. UI를 이루는 기초 강의들 부터 여러 툴 강의를 배우면서 실제로 내가 화면을 디자인 할 때 어떤 방법으로 만들 수 있는지 서비스 내에서는 어떤 요소 단위가 모여 한 화면을 이루고 그 화면이 어떻게 서비스를 이루는지에 대해서 전반적인 흐름을 배울 수 있었다. 이도 재미있었지만 가장 좋았던 것은 UX 이론 수업들이었다. 실제로 종이 위 펜이 되는게 UI라면 ..

제로베이스 99일차 학습노트이다.오늘은 디자인 케이스 스터디 강의를 진행하였다. 실제 서비스 사례를 분석하고 따라 만들어보는 방식으로, 실무에서 어떤 식으로 UI가 구성되고 사용자 흐름이 설계되는지에 대한 통찰을 얻을 수 있었던 유익한 시간이었다. 이번 실습은 특히 'Hello Monday'라는 디자인 스튜디오의 웹사이트를 참고하여 작업이 진행되었으며, 스케치를 활용하여 데스크탑과 모바일 화면의 차이를 살펴보고 레이아웃을 재현하는 데 집중했다.오늘의 강의 내용1. 디자인 케이스 스터디이번 케이스 스터디에서는 Branding, Experiences, Contact 등의 주요 섹션을 중심으로 페이지의 전체적인 구조를 스케치에서 재현해보는 실습을 진행했다. 각각의 페이지는 동일한 디자인 언어를 기반으로 구성되..

제로베이스 98일차 학습노트이다.오늘은 Sketch 툴을 활용한 디자인 실습과 함께, UI 화면 설계에서 반드시 필요한 네비게이션 구성과 디자인 가이드 제작, 그리고 협업 툴인 제플린(Zeplin)의 활용에 대해 배웠다. 화면을 설계하는 것뿐 아니라, 그것을 개발자와 디자이너 간에 원활히 전달하고 협업할 수 있도록 만드는 실무적인 내용이 중심이 되었던 강의였다.오늘의 강의 내용1. Navigation네비게이션은 앱이나 웹서비스 내에서 사용자가 원하는 정보를 빠르게 찾고 이동할 수 있도록 돕는 핵심 구조이다. 오늘 실습에서는 여러 화면 간 연결 흐름을 그려보며, 어떤 정보 구조와 이동 방식이 사용자에게 더 직관적일지를 고민하는 시간을 가졌다.상단 앱바, 하단 탭바, 햄버거 메뉴, 뒤로가기 버튼 등 주요 네..

제로베이스 97일차 학습노트이다.오늘은 튜토리얼에 대한 실습을 진행하였다. 튜토리얼은 서비스에 대한 가이드를 처음에 보여주는 화면으로 회원가입 후 자동으로 실행되는 온보딩이다. 때문에 화면 안에 스마트폰 모양이 들어가고 그 안에 서비스가 어떻게 진행되는지 화면이 나타난다. 이 안에서 화면을 또 다시 보여주기 때문에 가장 확실하게 전달하고 싶은 내용들만 보여주는 것이 사용자의 이탈을 막는다.오늘의 강의 내용1. 튜토리얼투토리얼은 화면안의 화면, 그리고 화면을 설명하는 텍스트와 그에대한 설명이 들어간다. 그리고 튜토리얼을 보고 싶지 않은 사용자가 있으므로 이를 고려하여 건너뛰기 혹은 시작하기라는 버튼이 반드시 존재해야한다. 튜토리얼이 너무 길어지면 사용자는 지루해하고 시작도 전에 지치기 때문에 핵심적인 부분..

제로베이스 96일차 학습노트이다.오늘은 Sketch에서 회원가입의 화면을 실습하였다. 서비스에 들어오면 가장 처음에 진행하는 회원가입 화면이기 때문에 브랜드의 분위기를 사용자가 바로 느낄 수 있는 화면이라고 생각이 들었다. 주로 쓰이는 색상이 무엇인지, 귀찮고 복잡한 회원가입을 어떻게 가이드하고 있는지, 그리고 그 문구는 어떤지를 보면서 전체적인 서비스의 느낌을 알아가게 된다.오늘의 강의 내용 1. 회원가입 로그인회원가입을 하는 화면을 실습했다. 회원가입이라는 타이틀이 위에 있고, 아래에는 사용자에게 말하는 문구, 입력창 들이 나와있다. 특히 화면을 디자인할 때 중요한 부분이 뒤로가기를 만들어 놓는 것이다. 스케치를 하다보면 뒤로가기나 홈으로 가는 버튼을 빼먹는 경우가 있는데 이를 항상 주의해야한다. 또..

제로베이스 95일차 학습노트이다.오늘은 Sketch에서의 스크린 디자인 중 스플래쉬(Splash) 화면에 대해 배웠다. 스플래쉬는 앱을 처음 실행했을 때 사용자에게 가장 먼저 보여지는 화면으로, 서비스의 정체성과 첫인상을 결정짓는 중요한 역할을 한다. 특히 금융권에서 자주 활용되는 스타일을 참고해 실습을 진행하며, 실무적인 관점에서 스플래쉬 화면의 구성을 이해할 수 있었다.오늘의 강의 내용1. Splash스플래쉬 화면은 사용자가 앱을 실행했을 때 가장 먼저 보게 되는 화면으로, 로딩 시간을 자연스럽게 넘기고 브랜드 메시지를 전달하는 역할을 한다. 단순히 로고를 노출하는 것을 넘어, 앱의 정체성을 함축적으로 보여줄 수 있도록 텍스트와 컬러, 구성요소를 조화롭게 배치하는 것이 중요하다. 오늘 실습에서는 ‘일..

제로베이스 94일차 학습노트이다.오늘은 컴포넌트 디자인의 ETC 두번째, 세번째 수업이었다. 앞서 앱바, 탭부터 시작해서 리스트에 이르기까지 다양한 컴포넌트들을 Sketch에서 작업해보았는데, 화면을 구성하는 가장 기본 단위라고 볼 수 있는 컴포넌트들을 잘 배울 수 있어서 좋았다.오늘의 강의 내용1. ETC(2)스낵바는 사용자가 수행한 작업에 대해 간단히 피드백을 제공하는 역할을 하는 컴포넌트다. 오늘 수업에서는 스낵바의 위치, 색상, 텍스트 정렬 방식 등을 중심으로 실습을 진행했다. 하단 중앙이나 좌측에 배치되는 기본 형태를 그려보고, '재시도' 버튼처럼 간단한 액션이 포함된 형태도 만들어보았다.스낵바는 잠시 나타났다가 사라지는 특성상 사용자에게 필요한 정보를 짧고 명확하게 전달해야 하기 때문에, 정보..

제로베이스 93일차 학습노트이다.오늘은 컴포넌트 디자인 수업의 마지막 파트로, 지금까지 배운 내용을 정리하고 응용해보는 ETC 실습을 진행했다. Cards, Lists 외에도 실제 인터페이스에서 자주 쓰이는 다양한 컴포넌트들을 직접 구성해보는 시간이었다.오늘의 강의 내용1. ETC먼저 다이얼로그(Dialog) 컴포넌트를 만들어봤다. 다이얼로그는 사용자에게 중요한 정보를 전달하거나 확인을 요청할 때 사용되는 UI 요소인데, ‘Two-line dialog header’라는 이름처럼 제목과 부제목이 들어가는 기본형을 제작했다. 타이포그래피의 계층 구조, 버튼의 정렬 방식, 그림자와 여백 설정까지 꼼꼼히 다뤄봤다. 배경을 반투명하게 설정하여 포커스를 유도하는 기법도 함께 실습했다. 그다음으로는 이미지와 텍스트,..

제로베이스 92일차 학습노트이다.오늘은 컴포넌트 디자인 수업의 일환으로 Lists와 인터렉션을 공부하는 팁에 대해 배웠다. 이전까지 버튼, 카드, 내비게이션처럼 시선을 끄는 컴포넌트를 주로 다뤘다면, 리스트는 보다 기능적인 UI 구성요소였다. 하지만 앱이나 웹에서 리스트는 정보를 나열하고 전달하는 데 있어 매우 핵심적인 요소이기 때문에 이번 강의는 단순함 속에서도 얼마나 섬세한 설계가 필요한지 느낄 수 있었다. 특히 사용자가 리스트를 쉽게 읽고 이해할 수 있도록 구성하는 것이 얼마나 중요한 UX 요소인지를 체감할 수 있었다.오늘의 강의 내용 1. Lists리스트는 여러 항목을 정렬해서 보여줄 때 사용하는 기본적인 컴포넌트다. 실습에서는 Sketch를 활용해 리스트의 다양한 변형을 디자인해보았다. 단순히 ..

제로베이스 91일차 학습노트이다.오늘은 Sketch의 Cards의 두번째 수업과, 프로토파이의 프로토타이핑 툴 소개 수업을 들었다. 스케치의 경우 전에도 배웠던 디자인 요소들을 툴만 바꿔서 실습하는 것이다 보니 조금 지루한 감이 없지않아 있었다. 그래서 계속해서 프로토파이 실습과 같이 듣고 있다. 모바일 디자인에서 가장 주요하게 사용되는 카드 모듈 디자인의 실습이라서 더 많이 연습할수록 좋다는 마음가짐을 가지고 임했다.오늘의 수업 내용 1. Cards (2)두 번째 카드 강의에서는 이미지와 텍스트, 아이콘이 함께 들어가는 좀 더 복잡한 카드 디자인을 실습했다. 특히 썸네일 이미지와 텍스트가 나란히 배치되는 리스트형 카드, 그리고 이미지를 크게 보여주는 타입 등 다양한 형태를 만들어보았다. 텍스트는 보통 ..