yeoni

1. 벡터와 비트맵의 차이 그래픽 작업에서 사용하는 이미지 형식은 크게 벡터와 비트맵 두 가지로 나뉨벡터: 점과 점을 잇는 선을 컴퓨터 좌표값으로 나타낸 것으로 크기를 확대하거나 축소해도 컴퓨터가 좌표값을 계산하기 때문에 화질이 깨지지 않음비트맵: 픽셀로 이미지를 만들어내는 방식. 픽셀이란 화면 이미지를 구성하는 최소단위로 사진을 확대하면 화질이 손상됨 일반적인 사진 작업은 포토샵에서 진행하고, 크기를 자유롭게 조절해야하는 로고, 패키지, 캐릭터 등의 작업은 일러스트레이터에서 작업한다.    2. RGB 모드와 CMYK 모드의 차이   RGBCMYK레드, 그린, 블루의 혼합시안, 마젠타, 옐로우, 블랙의 혼합빛의 삼원색염료의 삼원색혼합할수록 흰색에 가까워지는 가산혼합방식혼합할수록 어두워지는 감산혼합방식화..

Chapter 2. 인터페이스 디자인기초2-1) 디자인 환경 - 모바일 디자인 환경평면으로 보고 있기 때문에 X, Y축만 있는 것 처럼 보이지만 실제로는 Z축도 존재함.모바일에서는 Z축을 다양하게 표현함 -> 그림자를 주어 화면에서 살짝 띄워져있는 것처럼 보임 -> Z축의 의미를 가짐 A와 B는 동일한 선상에 있지만 C는 조금 더 뒤에 있음섀도우의 깊이감을 통해 높이를 조절할 수 있음  - 밀도와 해상도동일한 사이즈의 스마트폰이어도 그 안에 담겨 있는 실제 픽셀의 밀도가 다를 수 있음-> 밀도와 픽셀 차이를 무시하면 스마트폰 해상도에 따라서 어떤 화면에서는 작은 원, 어떤 화면에서는 큰원으로 보일 수 있음 DP(Density Independent Pixel): 화면의 구성 요소들의 크기나 배치를할 때 기..

Chapter1. 디자인 기초1-1) Design Histroy1, 2 - 기본적인 욕구 충족 후 안정화가 되면 꾸밈 요소에 가치를 두게됨- 도구는 1차적인 기본 목적이 충족되자 장식적인 면에 치중함. 혁신적인 기술발전이 이루어지자 화려한 공예품을 만들기 시작함. 부와 권위를 과시하기 위해 사용됨 - 산업혁명으로 대량생산이 가능해짐: 장식적인 면보다는 부를 축적하는데에 집중많은 인력, 자유로운 이동 가능 - 산업혁명 이전: 대량생산이 불가능한 시기이다보니, 장인들이 물건을 만드는 즉시적인 행동패턴 (선 수요 - 후 공급)- 산업혁명 이후: 동일하게 규격화하여 제품을 대량생산하기에 프로세스를 가진 계획적이고 체계적인 행동패턴, 소비자의 이목을 끌 디자인이 필요해짐 - 현대에는 단순히 기술적인 면만 보는 것..

Chapter9. 공유와 협업9-1) 핸드오프 핸드오프: 디자이너가 구현한 레이아웃, 컬러, 타이포 등을 개발자로 보내는 것. 따라서 개발자와의 핸드오프 과정은 프로젝트를 명확히 전달하기 위한 과정이라고 할 수도 있음  - 유저플로우협업 시 소통 과정이 원활해져서 기획과 개발 간의 격차를 해소할 수 있음.화면이 어떤 흐름으로 설계되어 있는지를 보여준다면 개발자는 제품이나 서비스 구현에 문제가 되는 지점을 빠르게 파악 가능.유즈 케이스, 베리에이션, 멀티 디바이스 OS와 같은 요소들이 포함될 수 있음. 유저 플로우는 기획과 개발 결정을 위한 시각적인 정보를 제공하고 제품의 이해관계자와 팀원 모두에게 도움이 됨 - 유즈케이스유저 플로우가 화면에 대한 전체 흐름을 파악하는 것이라면 유지 케이스에서는 사용자에게..

Chapter 8. 디자인 시스템8-1) 디자인 시스템의 이해 디자인 시스템: 다양한 페이지와 채널을 걸쳐 공통의 언와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합디지털 제품의 사용 기준을 명확하게 정의한 재사용 가능한 구성 요소의 모음 디자인 시스템은 디자이너 만을 위한 것이 아니다. 여기서 디자인은 시각적인 아웃풋이 아니라 '설계하다'의 어원으로디자이너 뿐만 아니라 전체 조직 구성원을 대상으로 제품을 만드는 방법을 다루는 결과물들이다.디자인 원칙, 브랜드 정체성, 스타일 가이드, 관리 정책 등이 포함된다. 제품이나 서비스가 처음 시작될 때 규칙들이 잘 반영되지만 시간이 지나고 프로젝트가 커지면 규칙이 잘 지켜지지 않게 된다. 이러한 혼란을 방지하고..

Chapter 7. 프로토타입7-1) 인터랙션과 미리보기   두 페이지 인터랙션 걸어주기 두 페이지를 연결하고 미리보기를 눌러보면 화면 클릭시 다음 화면으로 파란색 페이지가 뜨고 다시 한 번 클릭하면 분홍색 페이지가 뜬다.    7-2) 베리언트 인터랙션  버튼 두 개를 만들고 인터랙션을 연결한다. 컴포넌트로 생성해 다음 페이지에서 버튼을 가져가 미리보기를 눌러보면 버튼이 바뀌게 된다.     7-3) 버튼 인터랙션  normal 버튼에서 hover 버튼으로 갈 때는 While hovering 으로 설정하고, hover 버튼에서 pressed 로 연결할 때는 while pressing으로 설정한다.  미리보기로 보면 버튼 위에 마우스를 올렸을 때와 클릭할 때 버튼 색이 바뀌는 것을 확인할 수 있다.   ..

Chapter6. 컴포넌트와 베리언트6-1) 컴포넌트와 인스턴스  원본을 삭제하면 컴포넌트도 제거되기 때문에 컴포넌트를 보관해두고 사용해야한다.  컴포넌트 설정하기 컴포넌트로 설정하면 오브젝트를 선택했을 때 보라색으로 표시된다.컴포넌트로 설정한 오브젝트를 복제한 것이 인스턴스이다. 컴포넌트로 설정한 오브젝트의 색상을 빨간색으로 바꾸니 아래에 복제한 두 인스턴스도 같은 색으로 변경됐다.하지만 가운데에 인스턴스1 오브젝트를 분홍색으로 바꾸어도 컴포넌트와 나머지 인스턴스2 오브젝트의 색상은 변경되지 않는다.컴포넌트의 색을 다시 회색빛이 도는 분홍색으로 변경했더니 인스턴스2만 같은 색으로 변경되고 아까 따로 색상을 변경한 인스턴스1은 변하지 않은 것을 볼 수 있다. 한 번 변경되고 나면 인스턴스는 영향을 받지 ..