Docs / UI 디자인스타일 설정

같은 색이나 글자 모양, 효과를 여러 곳에 쓰신다면 스타일로 담아 두십시오. 스타일을 고치면 그 스타일을 적용한 곳이 함께 바뀌기 때문에, 작업이 커질수록 디자인 전체의 통일감을 지키기가 훨씬 쉬워집니다. 이 문서에서는 옵클 에디터가 제공하는 스타일의 종류와 사용법을 정리합니다.

스타일 설정 칸

오른쪽 인스펙터의 스타일 설정 칸에는 네 가지 스타일이 모여 있습니다. 단락 스타일은 글꼴과 크기, 행간 같은 글자 모양을 담는 곳으로, 기본으로 «본문»이 들어 있고 편집을 눌러 고칩니다. 제목·소제목·본문처럼 글자 위계를 단락 스타일로 정해 두면 문서 전체의 글자 모양을 한 번에 바꿀 수 있습니다. 컬러칩은 72칸짜리 색 스타일 판입니다.

보정 스타일은 사진이나 영상을 고르고 +를 누르면 지금의 보정 값을 통째로 담아 둡니다. 여러 장의 사진에 같은 색감을 입혀야 할 때 한 장을 맞춰 담아 두고 나머지에 적용하기만 하면 되므로, 시리즈 사진의 톤을 맞출 때 유용합니다. 벡터 스타일은 도형이나 글자를 고르고 +를 누르면 칠·선·투명도·모드·효과 중 기본값이 아닌 모양새를 담아 둡니다.

칠 스타일과 선 스타일

칠(또는 선) 칸 제목 줄의 ⁘ 단추를 누르면 작은 스타일 판이 열립니다. 빈 칸을 누르면 지금 색이 새 스타일로 담기고, 다른 요소를 고른 뒤 칩을 누르면 그 스타일이 적용됩니다. 칩을 우클릭하면 색을 고치거나 편집할 수 있으며, 칩의 색을 바꾸면 그 칩을 적용한 모든 요소의 색이 함께 바뀝니다.

칠 스타일 판

색 변수 — 라이트와 다크

칩의 메뉴에서 그 칩을 색 변수에 이을 수 있습니다. 색 변수는 라이트와 다크 두 값을 가지고 있어서, 변수 표에서 대지마다 라이트·다크를 고르면 같은 디자인의 밝은 판과 어두운 판을 나란히 놓고 볼 수 있습니다. 다크 모드를 지원하는 앱 화면을 만들 때, 화면을 두 벌 그리지 않고도 두 가지 모습을 함께 관리할 수 있습니다.

스타일을 잘 쓰는 요령

처음부터 모든 것을 스타일로 만들 필요는 없습니다. 브랜드 색, 제목 글자, 버튼 그림자처럼 «여러 곳에 똑같이» 쓰는 것부터 하나씩 담아 두시기 바랍니다. 스타일 이름을 주 색·본문·카드 그림자처럼 쓰임새로 지어 두면, 나중에 다른 사람과 함께 작업할 때도 무엇을 어디에 써야 하는지 쉽게 알 수 있습니다.