Adwaita
アドワイタ / 2011– / 양식 / 플랫폼 화면 언어
GNOME이 자신의 기본 모습에 붙인 이름이며, 지침서는 밝은 판과 어두운 판과 고대비 판을 같은 부품으로 성립시킨다고 정한다. 창의 위쪽 끝을 헤더 바가 한 줄 가로지르고, 거기 놓이는 버튼은 배경도 테두리도 그리지 않는다. 아이콘은 16x16px 단색 심볼릭으로 통일된다.
한눈에 판단
시각적 특징
- 창의 위쪽 끝을 가로지르는 헤더 바 한 줄. 왼쪽과 가운데와 오른쪽 세 지점에 붙이고, 가운데에 창의 제목이 앉는다
- 헤더 바의 버튼은 배경도 테두리도 없고, 기호와 글자만 면 위에 뜬다
- 16x16px로 그린 단색 심볼릭 아이콘. 주요 선은 2px 굵기이고 원근을 주지 않은 정면 형태다
- Blue 3의 #3584e4를 포함해 색상마다 다섯 단계를 갖춘 공개 팔레트
적합한 용도
- Linux 데스크톱용 앱을 밝은 설정에서도 어두운 설정에서도 같은 골격으로 보이고 싶을 때
- 직접 만든 부품을 더할 때 색 값을 그대로 쓰지 않고 기존의 색 변수와 style class에 얹어 만들고 싶을 때
이 양식 사용하기
짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.
자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식
사전 항목
- 타이포그래피
- 버튼은 기호나 글자 가운데 하나로만 나타낸다. 둘을 나란히 두는 것은 측면 목록과 보기 전환에 한한다.
- 구성
- 위쪽에 헤더 바를 두고 주요 동작은 왼쪽, 제목은 가운데, 메뉴는 오른쪽에 놓는다. 잡아서 옮길 수 있는 빈 자리를 반드시 남긴다. 버튼을 붙여 잇는 대신 간격으로 무리를 만든다.
- 재료
- 색은 공개 팔레트에서 가져오고, 밝은 판과 어두운 판과 고대비 판에서 자동으로 바뀌는 변수로 보관한다. 아이콘은 단색 SVG로 그리고 색은 나중에 입힌다.
- 주의
- 색 값을 그대로 써 넣으면 어두운 판과 고대비 판으로 바꿨을 때만 깨지므로, 평소에 쓰는 화면에서는 끝까지 알아차릴 수 없다.
- 더 읽을거리
- the list of libadwaita style classes and the CSS variables they map to / why the GNOME palette carries five steps per hue, and how each step is used / the consequence of a design in which the contents of the header bar swap as the displayed content changes
관련 항목
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)공통 인상: Trust.Adwaita와 Flat Design / Vector Minimalism 비교
- Material Design (マテリアルデザイン)공통 인상: Trust / Technique.Adwaita와 Material Design 비교
자주 혼동되는 것
플랫폼 화면 언어 더 보기
플랫폼 화면 언어에서 공통 인상이 많은 항목을 우선해 골랐습니다.
- GOV.UK Design System (GOV.UK デザインシステム)공통 인상: Trust / Calm / Technique.
- GitHub Primer (GitHub Primer)공통 인상: Technique / Trust / Calm.
- Adobe Spectrum (Adobe Spectrum)공통 인상: Technique / Trust / Calm.
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/adwaita
- Markdown
- [Adwaita — IndexStyle](https://indexstyle.org/ko/styles/adwaita)
- HTML
- <a href="https://indexstyle.org/ko/styles/adwaita">Adwaita — IndexStyle</a>