본문 바로가기

[UX, UI 디자인 입문]/UX, UI 학습일지

[Figma 활용법(2)] 3주차 학습일지 정보 구조도(Information Architecture)IA : ex)층별 안내도 - 화면과 정보들이 어떤 구조로 연결되어 있는지를 나타내는 일종의 설계도 - 제품을 건물이라고 생각했을 때 IA는 층별 안내도로 비유할 수 있다. 화면 흐름도(Flow chart) : ex)오시는 길 - 플로우 차트라고 더 자주 불린다. - 사용자가 어떤 과정으로 제품을 이용하는지 시각적으로 정리한 순서도 - 제품을 건물이라고 생각했을 때 플로우차트는 (건물로)오시는 길로 비유할 수 있다. - 사용자가 어디어디를 거쳐서 목적지에 도달할 수 있는지를 나타낸 것 순서도 - 프로세스를 보여주는 다이어그램, 상자들과 화살표를 이용해서 문제에 대한 해결 과정을 도식화한 것 와이어프레임 - 화면의 구성과 흐름을 단순하게 만들어 빠르.. 더보기
[Figma 활용법 (1), (2)] 통합 학습일지 를 위장한 느낀점으로 떼우기 PC와스마트폰을 흔히 사용하는 현재, 정말 앱을 자주 사용하는 지금, 눈으로는 몇번이 아닌 몇백번 몇천번을 보고 지나가는 것이 모두 다 디자이너분들과 여러 사람들이 모여서 회의하여 버튼 모양은 그렇다쳐도 버튼의 컬러, 위치, 어떻게 팝업을 띄울지, 어느 페이지로 연결하여 어느 페이지장면을 보여줄지에 대해 다 설계하여 만들었다는 것을 이번 UXUI교육을 들으며 정말 많은 노고가 느껴지는 시간이었다. 숙련된 분들은 사실 어느정도 반복하다보면 쉬운 작업이라지만 나처럼 이렇게 배우는 과정을 다 밞고 올라왔다는 증거하에 실력이 늘어났다고 생각한다. 아무 과정없이 실력이 눌 순 없으니까. 인기많은 LOL게임과 오래된 사람들끼리도 차이가 심한 격투게임에서도 다들 수많은 시간을 들여가며 게.. 더보기
[Figma 활용법 (2)] 1주차 학습일지 모든 UI종류를 알기는 힘들기에 자세히는 모르더라도 정확한 의미정도는 알고 있는게 중요하다. 얕으면서도 정확하게 알고 있어야 하는 법 #모달(Modal) - 모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을조작할 수 없는것 - 모달이라는 건 UI의 이름이 아닌, UI를 분류하는기준 중 하나의 속성 '사용자를 방해하면서라도 반드시 확인해야 하는 부분이나 그만큼 중요한 선택이 필요한 시점'에 사용해야 하는 것 #팝업 : 화면 위에 새로운 화면을 띄우는 것 ex)홍보성 광고, 공지사항 내용) 팝업의 유형 - 윈도우 팝업 새로운 윈도우(브라우저 창)을 띄워주는 방식 (광고, 악성코드 등을 방지하기 위해 브라우저에서 팝업을 차단하여 점점 사용하지 않는 추세) -레이어 팝업 옆시선에서 봤을 경우 가상의 층으.. 더보기
[Figma 활용법 (1)] 3주차 마지막 학습일지(4) 폰트스타일 - 패밀리(Famaily) : 폰트의 종류 또는 이름 - 굵기(=무게감 Weight) : 단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 때문에 '무게감' 이라는 표현을 사용 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호 - 크기(Size) : 폰트의 크기, 일반적으로 16px부터 시작, 2px씩 줄이거나 늘림 ※왜 16px이 시작점일까? 웹사이트의 기본 폰트 사이즈가 16px이기에 앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px로 사용했기 때문에 자연스럽게 기본값이 되었다. #폰트 크기가 20px이상일 때는 4px씩 차이나게 하는 게 일반적이며, 보통 20px미만인 폰트들은 본문에 사용, 20px이상부턴 제목에 사용 - .. 더보기
[Figma 활용법 (1)] 3주차 학습일지(3) 📌디자인 시스템은 규칙이 매우 중요한 개념 RGB와 Hex Code 디스플레이는 빛의 3원색으로 구현되는 화면 즉, 빛의 농도와 명암을 조절해 여러가지 색으로 만들어진다. 빛의 3원색의 첫글자를 따서 쓰면 RGB가 되고, 우리가 아는 RGB색상의 뜻이된다. 이 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽는다. 이 16진수 값이 우리가 흔히 아는 헥스코드라고 한다. ★가장 어두운 색 900, 가장 밝은 색 50☆ Red, Green , Blue 0~255, 0~255, 0~255 =00~FF , 00~FF , 00~FF 흰색 =00, 00, 00 검은색 #컬러 스타일을 만드는 일반적인 방법 컬러 스타일은 기본적으로 2~3가지 색상으로 만든다. 우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상.. 더보기
[Figma 활용법 (1)] 3주차 학습일지(2) 그리드 - 가로 선과 세로 선을 직각으로 교차되게 만든 것을 의미하며 화면에 디자인을 배치하는 가이드라인 역할을 한다. - 일반적으로는 세로 방향의 기둥들을 좌우로 세우는데, 가로 줄을 추가로 사용하는 경우도 있다. - 디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰서 레이아웃을 짜게 된다. 8포인트 그리드 디자인☞8이라는 숫자를 쪼개거나 곱하여 UI가 유연하게 변하게 할 수 있도록 하는 UI에서의 규칙 - UI를 디자인하고 배치하는 규칙이 바로 8포인트 그리드 디자인이라고 한다. - UI 사이의 간격, UI의 여백, 크기 등을 8의 배수 단위로 조정해서 사용한다. - UI 디자인에 일정한 규칙이 있다면 다른 디자이너와 함께 일할 때도, 개발자가 디자인을 보고 개발할 때도 서로 물어보는 .. 더보기
[Figma 활용법 (1)] 3주차 학습일지 디스플레이와 픽셀 -우리가 웹사이트나 앱, 키오스크, 전광판, TV 등을 본다는 건 디지털 화면을 본다는 것 디지털 화면들을 디스플레이(Display) 해상도 - 해상도는 디스플레이의 선명한 정도를 나타내는 말 - 해상도는 디스플레이 안에 들어가 있는 픽셀의 개수를 의미한다. - 픽셀의 갯수는 가로 줄의 픽셀 개수 세로 줄의 픽셀 개수로 나타난다. 해상도와 픽셀의 관계 1)해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커진다. 2)화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아진다. 3)일반적으로 화면 크기가 클 수록 해상도도 높다. 4)면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사가 가능하다. 모바일 앱의 사이즈 - 같은 앱이라면 어떤 스마트폰으로 열어도 항상 화면.. 더보기
[Figma 활용법 (1)] 2주차 학습일지(2) 코드 블록의 구조 패딩 : 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백 보더 : 실제 코드 블록의 테두리 마진 : 코드 블록 바깥의 여백이자 다른 코드 블록간의 간격 ※디자이너들이 만드는 UI의 크기는 개체의 크기 + 패딩 ★★★오토레이아웃에서는 눈에 보이는 패널에서 위에있는 텍스트가 아래있는거고, 아래 있는게 맨 앞에 있다.★★★ ㆍ컨스트레인트 -반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어줘야 한다. -실무에서 많이 사용하는 기능이고, 또 활용하기에 따라 정말 다양한 움직임을 연출해 낼 수 있다. ㆍ컨스트레인트의 정의 -컨스트레인트는 제약, 제한이라는 뜻 -오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한.. 더보기

티스토리툴바