[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 2

기록/새싹x코딩온

루미미 2023. 7. 27. 13:19

그리드란? 격자나 바둑판 모양의 눈금을 의미한다.

디자인 레이아웃에 규칙을 부여하는 수단으로 디자인이 동일한 그리드 규칙을 가지게 되면 일관된 UI를 갖는다.

breakpoint란 반응형 웹에서 사이즈가 변화하는 지점이다. (변곡점)

그리드는 웹사이즈, 테블릿사이즈, 모바일사이즈로 나누면 되는데

태블릿 환경일 때는 column값을 6 또는 8로 두고 작업하고

모바일 환경일 때는 column값을 4로 두고 작업한다.

container는 보통 1200px을 사용한다.

아래는 max width, columns, gutter width, margin width 값을 입력하면 page width, column width 값을 알려주는 gird 사이트이다.

Grid Calculator by Nicolaj Kirkgaard Nielsen

gridcalculator.dk

프레임을 만들고 오른쪽 패널 Layout grid를 클릭한다. - Layout grid setting을 클릭하고 Grid를 Columns로 바꾼다. - Type을 center로 바꾸고 count, width, gutter를 원하는대로 바꾼다.

Auto layout

Auto layout를 적용하면 선택한 요소들을 묶는다.

작은 단위부터 묶으면 편하다.

패딩

Horizontal padding : 좌우 패딩

Vertical padding : 상하 패딩

간격

Horizontal gaq between items : 요소의 간격

가독성을 위해서 간격은 큰 단위로 갈 수록 점진적으로 늘어난다.

나열

Vartical layout : 가로로 나열

Horizontal layout : 세로로 나열

Wrap : 요소가 프레임보다 커지면 줄바꿈

카드 개수는 보통 웹 - 4개, 테블릿 - 3개, 모바일 - 2개로 한다.

두 개 이상의 요소를 만들고 오른쪽 패널 상단에 Prototype을 클릭한다. - 바꾸기 전 요소에 마우스를 올려 +모양이 나오면 그 모양을 드래그 하면서 바꿀 요소의 + 모양으로 화살표를 이동한다. - 패널창이 나오면 이벤트, 방향을 선택해서 클릭한다.

component란? 재사용 가능한 ui 요소를 의미한다.

다른 페이지 또는 프로젝트에서도 재사용할 수 있다.

main component - 원본

instance component - 복제품

main component가 변경되면 instance component도 같이 변경되어 작업 시간을 절약하고 일관된 ui를 유지할 수 있게 해준다.