📌
1. 포지션
2. 파운데이션
3. 색상
1. 포지션 (Position)
📌
화면 안의 모든 요소들이 화면 상에서 가지는 위치 속성 (움직일 때 구현)
- Static
일반적인 요소들이 가지고 있는 포지션
기본값, 스크롤을 하면 같이 움직임
- Fixed
화면 전체를 기준으로 스크롤을 하더라도 항상 고정된 위치에 있음
ex. 헤더, 앱 하단의 버튼 등
- Absolute
부모 컨테이너를 기준으로 부모 컨테이너 안에서 위치가 고정
디자인의 포지션 패널에서 적용 가능 (오토레이아웃 프레임 내부에 위치)
- Sticky
스크롤을 따라 움직이다가 특정 위치부터 상단에 고정되는 것
absolute 속성 빼고 다른 position 속성들은 prototype 패널의 scroll behavior에서 조정
(스크롤될 때 구현되므로)
오토레이아웃과 컨스트레인트를 이용하여 과제 수행 (☺️)
2. 파운데이션 (Foundation)
📌
UI를 구성하는 가장 작은 요소이자 기초 재료
색상, 폰트, 간격, 곡률, 아이콘, 그리드 등이 해당된다.
기초 재료들(파운데이션)을 조합하여 컴포넌트를 만들 수 있다
3. 색상
인쇄에는 색의 3원색 (Magenta, Yellow, Cyan / 모일수록 어두워짐, 감산혼합)이 사용
디스플레이는 빛의 3원색 (Red, Green, Blue / 모일수록 밝아짐, 가산혼합)으로 구현됨
RGB, Hexcode
컴퓨터는 그러한 빛의 3원색을 각각 256가지의 값으로 보여줄 수 있다.
컴퓨터는 이 숫자를 16진수(00 - FF)로 변환해서 읽음(Hex Code)
컬러 프로파일 (Color Profile)
📌
디스플레이가 코드를 해석할 때 사용하는 색 기준표
빛의 색상에는 절대적인 기준이 없기 때문에 색상을 자기만의 기준으로 해석한다.
전세계적으로 사용할 수 있어야하며 공신력이 있는 기관이나 기업에서 만들어서 배포
컬러 프로파일마다 더 정교하게 보여주는 색상들이 조금씩 달라서 어떤 뷰어로 보느냐에 따라 색상이 미묘하게 달라진다
캘리브레이션 (Calibration) : 정교하게 색상을 조정하는 것
컬러 스타일
📌
디자인할 때 사용할 색상들을 모아두는 컬러 팔레트
협업과 효율을 위해 규칙이 중요하다.
-
컬러 스타일은 기본적으로 2-3가지 색상으로 만든다.
-
일반적으로 핵심적인 부분에 사용할 포인트 컬러(프라이머리 컬러, 엑센트 컬러) 하나를 두고 글자와 배경은 흑백 조합으로 사용하는 것을 추천
-
배경색으로 전체적인 분위기를 생성할 수 있다. 일반적으로 흰색 (#FFFFFF)
-
포인트 컬러를 뒷받침하는 색상 (서브컬러, 세컨더리 컬러)를 지정해주기도 한다. (잘 안 함)
-
색상을 정했다면 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만든다.
-
글자 등에 사용할 흰색과 검은색을 만들고 10단계의 회색 색상도 만든다.
색상의 확장성
다양한 상황에 대응할 수 있도록 색상을 유연하게 지정하기 위해 명도별로 10단계로 나눈다.
ex. 강조하고 싶은 텍스트와 덜 강조하고 싶은 텍스트
왜 10단계인가?
0% - 100% 의 명도를 10으로 나눠서 사용
색상간의 차이를 알아보기 쉽고 중간에 50단위의 색상을 추가하기에도 용이하다.
(꼭 10단계인 필요는 없고 필요에 따라 조정)
🦉 다음시간에 학습할 내용
컬러스타일 만드는 법
폰트 스타일
마스터 컴포넌트와 인스턴스
