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스플래쉬 화면은 사용자가 앱을 실행했을 때 가장 먼저 보게 되는 화면으로, 로딩 시간을 자연스럽게 넘기고 브랜드 메시지를 전달하는 역할을 한다. 단순히 로고를 노출하는 것을 넘어, 앱의 정체성을 함축적으로 보여줄 수 있도록 텍스트와 컬러, 구성요소를 조화롭게 배치하는 것이 중요하다. 오늘 실습에서는 ‘일..

제로베이스 85일차 학습노트이다.오늘은 Sketch 툴을 기반으로 한 첫 실습 수업으로, 아이콘 디자인과 심볼 및 스타일의 활용에 대해 배웠다. Sketch의 다양한 벡터 툴과 심볼 시스템을 실제로 사용해 보며 디자인 작업의 기본 흐름과 효율적인 반복 요소 관리 방법을 익히는 시간이었다.오늘의 강의 내용 1. 아이콘 디자인Sketch는 벡터 기반 툴인 만큼 아이콘을 그리기 위한 다양한 쉐이프 편집 도구를 제공한다. 오늘 실습에서는 특히 Boolean 연산 기능인 Union(합치기), Subtract(빼기), Intersect(교집합), Difference(차집합)을 활용해 다양한 형태의 간단한 아이콘을 만들어 보았다. 이 기능들은 서로 겹치는 도형을 조합하거나 잘라내며 새로운 아이콘 형태를 만드는 데 매..

제로베이스 36일차 학습노트이다.오늘은 어제와는 다른 Page를 실습했다. 어제보다 훨씬 글이 많고 다른 엘리먼트도 많은 디자인이었다. 실습에서는 에셋을 활용하지 않다보니 자동화되어 효율적인 버튼이나 아이콘을 그리지 않으니 시간이 오래걸린다. 하지만 그래도 손이 빨라지고 기초를 배우기에는 더 많은 도움이 된다. 어제부터 페이지 실습은 완성된 것을 보면 한 화면을 그렸다는 생각에 좀 더 뿌듯한 것 같다.오늘의 강의 내용 1. Page어제에 이어 한 화면을 이루는 페이지를 그렸다. 실습이 웹, 앱으로 나눠져있으면 좋겠지만 두 개의 실습 모두 모바일로 국한되어 있었다. 오늘 실습한 페이지는 스타벅스 할인 카드 혜택 페이지였는데, 썸네일, 타이틀, 아이콘, 탭, 이미지, 플래그, 부가 설명, 디바이더 등이 모두..

제로베이스 35일차 학습노트이다.오늘은 기본 모듈의 베리에이션과 페이지에 대해서 배웠다. 모듈은 사실상 그 전의 모듈 중에서 약간씩 다른 것들에 대해서 실습하는 정도였고, 페이지가 모바일의 스크롤 내리기 전의 한 페이지 정도되는 양의 작업이었다. 작업들이 왜 이렇게 디자인되는지 알지 않고, 단순히 카피 디자인을 해보는 것이니 지치고 지루해져가는 것 같다. 하지만 실제로 내가 모바일에서 봤었던 것 같은 화면을 디자인 하니 실무 디자이너들이 어떻게 디자인하는지, 얼마나 걸릴지가 조금 더 감이 오는 것 같다.오늘의 강의 내용 1. Module variation일반적으로 흔히 보이는 모듈형태로 베리에이션 된 모듈이며 다양한 형태의 모듈들이 있어, 모듈들이 모여 페이지를 이룰 수 있다. 이번 시간에는 주식 수익 ..

제로베이스 34일차 학습노트이다.오늘은 모듈 수업들을 들었다. 모듈에 대해 정확히 개념이 잡힌건 아니지만 사각 영역 안에 여러 컴포넌트들이 들어간 것을 말하는 것 같다. 주로 섹션을 나누기 때문에 클릭해서 해당 카테고리로 들어간다거나, 메인이 되는 정보들을 나열할 때 자주 사용되는 것 같다. 그래서 리스트 모듈, 썸네일 모듈도 모두 각 서비스에서 핵심적인 내용들을 담는 ex) 은행 어플 - 입출금 내역, 쇼핑 어플 - 혜택 등 사용자가 크게 관심있을 만한 것들 그리고 클릭을 유도하는 것들을 모듈에서 보여준다.오늘의 강의 내용 1. Thumbnail module썸네일 이미지와 텍스트들이 어우러진 모듈로 각 요소의 간격을 정리하여 보여준다. 가로 세로 비율이 어느정도 비슷한 크게 정사각형에서 벗어나지 않는 ..