스위스 UI 디자인은(는) 무엇을 하나요?

이 스킬은 스위스 학교의 원칙을 구체적인 UI 결정으로 전환합니다. 이 학교의 창시 개념은 에른스트 켈러(Ernst Keller)로부터 비롯되었으며, 디자인 해결책은 문제의 내용에서 나와야 합니다. 아래의 모든 내용은 이 원칙을 따릅니다. 그리드는 논리이고, 서체는 이미지이며, 색상은 명확한 역할을 가진 강력한 평면이며, 여백은 구조이고, 장식은 없습니다.

두 번째 목표: 결과물은 AI가 생성한 것처럼 보이지 않아야 합니다. 일반적인 AI 인터페이스는 하나의 공통된 모습을 공유합니다(중앙 영웅, 보라색 그라데이션, 부드러운 그림자가 있는 둥근 카드, 세 개의 아이콘 기능, 모호한 카피). 스위스 스타일은 그 모습과 거의 반대이므로, 규율을 가지고 적용하면 대부분의 문제가 해결됩니다. 5부에서 나머지를 처리합니다.

세 번째 목표: 결과물은 힘을 가져야 합니다. 크림색 배경에 주황색 블록 하나만 있는 깔끔한 페이지는 그리드 측면에서만 스위스 스타일입니다. 이 스타일로 유명한 포스터는 실제로 색상으로 뒤덮여 있습니다. 강력한 평면 색상 또는 검정색이 시트의 83-97%를 채우거나, 하나의 크로매틱 잉크가 모든 것을 전달하고 착색된 패널이 나머지를 채웁니다. 따라서 4단계는 레이아웃 이전에 룩(바탕, 색 구성, 그림 처리)을 선택합니다. references/looks.md 파일에는 실제 포스터에서 샘플링된 5가지 룩과 테스트된 CSS가 있습니다. scripts/color_power.py는 결과를 측정합니다.

이 파일의 구성 방식

워크플로우 — 순서대로 단계
그리드, 간격, 서체 및 색상 — 토큰, 스케일, 팔레트, 레이아웃 레시피, 기본 CSS
아랍어 및 RTL
컴포넌트
AI처럼 보이지 않게 — 검토 체크리스트
출처: 스위스 학교 간략 설명(책자 The Swiss School of Design에서 발췌)

또한 이 스킬에는 references/looks.md(룩, 대비 쌍, 테스트된 CSS 메커니즘) 및 scripts/color_power.py(스크린샷 색상-파워 검사)가 포함됩니다.

1부 — 워크플로우

1. 콘텐츠에서 시작하라

화면이 존재하는 단 한 가지(하나의 메시지, 하나의 액션)를 적으십시오. 그것이 지배적인 요소가 됩니다.
나머지를 최대 3-4단계의 계층 구조로 순위를 매기십시오.
사용자가 콘텐츠를 제공하지 않았다면, 대상 언어로 실제적이고 구체적인 콘텐츠를 작성하십시오: 현실적인 현지 이름, 정확한 숫자, 날짜, 가격, 장소. 절대 lorem ipsum이나 마케팅용 채우기 텍스트("가능성을 열어보세요…" 또는 그 아랍어 동등 표현)를 사용하지 마십시오. 구체적인 콘텐츠는 사람이 페이지를 만들었다는 가장 강력한 단일 신호입니다. 사용자에게 어떤 세부 사항을 대체해야 하는 가정인지 알려주십시오.
스위스 방식으로 카피를 작성하십시오: 광고와 선전의 과장된 주장에서 자유로운 객관적이고 사실적인 표현(메그스(Meggs)의 스타일 정의). 디자이너는 판매원이 아닌 정보를 위한 명확한 채널 역할을 합니다. 사실, 숫자, 조건 및 평범한 동사가 여기서 형용사보다 더 잘 설득합니다.
언어와 방향을 결정하십시오. 아랍어 → dir="rtl"을 사용하고 3부를 적용하여 정렬, 글꼴 및 줄 높이가 변경됩니다.

2. 방향을 의도적으로 선택하라

스위스 학교는 하나의 룩이 아닙니다. 각각 개척자나 학교의 원칙에 기반한 다음 방향 중 하나를 선택하십시오(원칙을 사용하고 그들의 포스터를 절대 복사하지 마십시오):

방향	특성	적합한 경우
취리히 — 뮐러-브록만	엄격한 그리드, 때로는 보임; 객관적인 어조; 하나의 큰 사진 또는 추상 기하학적 형태 옆의 작고 정확한 서체; 많은 여백.	문서화, 복잡한 앱, 대시보드, 기관, 금융
바젤 — 호프만	흑백, 고대비, 형상-배경, 매우 적은 수의 큰 형태, 형태로서의 서체.	문화, 포트폴리오, 이벤트, 건축
발머	그리드 위에 구축된 제목, 무거운 굵기, 빨강 + 검정, 단어 쌓기, 보이는 구조.	브랜드, 캠페인, 런칭, 태도가 있는 랜딩 페이지
켈러	대담한 평면 색상 필드, 단순한 기하학적 형태, 가장자리에서 잘린 과장된 크기의 서체.	소비자 제품, 교육, 커뮤니티, 박물관
바젤 오브제 포스터 (자흐플라카트)	하나의 오브제(제품, 도구, 요리, 장치)가 거대하고, 클로즈업되어 선명하게 촬영되며, 이름 외에는 거의 아무것도 없음.	실물 제품, 식품, 소매, 하드웨어
포토몽타주 (허버트 매터)	극적으로 다른 스케일의 사진들이 결합되고, 그리드에서 잘리며, 서체가 그 안에 고정됨.	관광, 장소, 이벤트, 미디어

선택에 도움이 되는 배경 지식: 스위스 국립 도서관은 두 전후 진영, 취리히 = 구체 예술(수학적 구성, 순수 기하학적 평면; 맥스 빌(Max Bill)은 1930년대 후반 최초의 실제 레이아웃 그리드를 구축함)과 바젤 = 신즉물주의(오브제, 사진, 형태의 대비)를 설명합니다. 켈러 자신은 고정된 스타일을 가르치지 않았습니다. 그는 해결책이 내용에서 나와야 한다고 믿었으므로 그의 작업은 매우 다양합니다. 이 스킬은 그를 따릅니다: 방향은 내용에서 나오며, 습관에서 나오지 않습니다.

취리히는 "안전한" 선택이며 매번 빠지기 쉽습니다. 그렇게 하면 모든 출력물이 비슷해 보입니다. 콘텐츠가 복잡하고 기능적일 때 취리히를 선택하십시오. 랜딩 페이지, 브랜드 및 캠페인의 경우 발머, 켈러 또는 바젤을 선호하십시오. 이들은 페이지에 하나의 강력한 순간(강한 색상의 전체 필드, 거대한 잘린 단어, 고대비 형태)을 제공하며, 조용한 페이지에는 부족합니다. 사용자에게 한 줄로 어떤 방향을 선택했는지와 그 이유를 알려주십시오. 인터페이스 내부에 쓰지 마십시오.

방향과 룩은 별개의 선택입니다. 방향은 구조를 결정합니다. 룩(4단계)은 색상을 결정합니다. 취리히 그리드는 Sun 룩을 입을 수 있고, 발머는 검정 + 스펙트럼을 입을 수 있습니다.

3. 콘텐츠에서 컨셉을 찾아라

바젤 학교는 이렇게 말했습니다(케네스 히버트(Kenneth Hiebert), 호프만의 제자): 추상적인 구조는 커뮤니케이션을 위한 수단이며, 이를 찾으려면 표면적인 스타일 이전에 메시지의 본질을 분리해야 합니다. 디자인하기 전에 글로 작성하십시오:

콘텐츠에서 구체적인 사실 5-8개를 나열하십시오: 숫자, 장소, 물리적 물체, 시간, 프로세스, 이름, 대비(이전/이후, 작음/큼).
각각 다른 사실을 바탕으로 세 가지 다른 컨셉을 각각 한 문장씩 작성하십시오. 예: 공유 오피스의 경우 (a) 건물 주소와 평면도를 이미지로 사용; (b) 하루 15시간을 직접 예약하는 그리드로 사용; (c) 실제 사물(책상, 열쇠, 의자)을 거대하게 보여줌(오브제 포스터).
이 제품에 가장 구체적이고, 이름만 바꿔서 경쟁사 페이지로 옮길 수 없는 것을 선택하십시오. 어떤 것을 선택했는지 한 줄로 말하십시오.

거대한 요소는 콘텐츠에서 나와야 하며, 콜 투 액션에서 나오지 않아야 합니다. 거대한 명령 동사("예약", "시작" 또는 그 아랍어 동등 표현)는 꼼수입니다. 어떤 제품에도 맞으며 빠르게 새로운 템플릿이 됩니다. 이 제품만이 가지고 있는 명사, 숫자 또는 이름을 사용하십시오: 장소, 중요한 수치, 오브제, 날짜.

4. 룩을 선택하고, 그 다음 시스템을 설정하라

룩이 먼저입니다. 레이아웃 전에 룩을 선택하고 references/looks.md에서 해당 토큰, 서체 쌍, 구성 및 테스트된 CSS를 확인하십시오. 바탕이 먼저 옵니다: 강력한 평면 색상 또는 잉크가 첫 화면의 최소 60%를 덮습니다. 두 가지 종이 바탕 룩은 예외입니다. 하나의 크로매틱 잉크가 모든 서체를 전달하고 착색된 패널이 최소 30%를 채웁니다. 콘텐츠에서 선택하고, 동일한 룩을 연속으로 두 번 사용하지 말며, 페이지당 하나의 룩을 사용하십시오(섹션은 팔레트가 아닌 구성을 변경합니다).

룩	바탕	팔레트	적합한 경우
1 Sun	하나의 강한 색상과 그 보색	노랑 `#FFC611` · 남색 `#3A3A9C` · 네이비 `#16154A`	랜딩 페이지, 이벤트, 문화, 교육
2 Violet ink	흰색; 모든 서체를 위한 하나의 크로매틱 잉크	보라 `#4F2A7D` · 페리윙클 `#CFDBF1` · 난초 `#BD9CBB`	에디토리얼, 저널, 보고서
3 Primary bands	3-4개의 전체-피(ELL) 쌓인 밴드	파랑 `#2F7BFF` · 초록 `#0FA23A` · 노랑 `#EFB83E` · 빨강 `#E6040A` · 잉크	사실 기반 랜딩 페이지, 캠페인, 기관
4 Black + spectrum	잉크 검정	6-9개의 순수 색상, 각각 최소 두 번 사용	카탈로그, 예약, 제품군, 대시보드 범례
5 Gig poster	크림색 또는 검정	잉크 + 빨강, 시안, 노랑, 보라, 겹침 포함	이벤트, 음악, 커뮤니티, 런칭

주황 + 네이비, 코발트 + 노랑, 핑크 + 진한 초록 및 기타 바탕은 동일한 파일에 있습니다. 브리프에 브랜드 색상이 명시된 경우, 그것이 바탕 또는 평면이 되고 파트너는 구성표에 의해 선택됩니다.

그런 다음 토큰(2부): 본문 라인(크기와 줄 높이), 이로부터 파생된 그리드(기본적으로 12/8/4 열 또는 콘텐츠가 요구하는 경우 다른 숫자), 기준선 단위(8px), 가파른 스케일을 가진 하나의 서체 패밀리(또는 하나의 아랍어 + 하나의 라틴어 파트너), 각 표면에 대한 하나의 텍스트 색상(각 쌍은 대비 확인)이 있는 룩의 팔레트.

5. 비대칭으로 구성하라

출처는 시각적 힘의 분배를 통한 균형을 묘사하며, 대칭이 아닙니다.

영웅을 중앙에 배치하지 마십시오. 무거운 요소(거대한 제목, 큰 사진, 색상 필드)를 한쪽에 배치하고, 반대쪽에는 여백과 작은 텍스트로 균형을 맞추십시오.
같지 않은 열 너비를 사용하십시오: 5+7, 4+8, 3+9, 2+6+4. 모든 곳에서 동일한 3분할은 AI의 기본값입니다.
의도적으로 오프셋하십시오: 제목은 열 1-9, 소개는 아래 7-11, 메타데이터는 1-3.
각 섹션에 동일한 그리드 위에서 다른 구성을 부여하십시오. 모든 섹션에서 "중앙 제목 + 카드 그리드"를 반복하는 것은 강력한 AI 신호입니다.
섹션 코딩 전에, 해당 너비를 주석으로 작성하십시오 (/* hero: h1 1–10, meta 1–3, lead 6–11 */). 그리드를 정직하게 유지합니다.

6. 포스터 레이어 추가 — 스위스 스타일을 만드는 요소, 단순히 깔끔한 것과의 차이

이 단계는 스위스 디자인과 깔끔한 디자인의 차이입니다. 출처 자체에서 스위스 원칙이 현대 UI의 기초가 되었다고 언급합니다. 즉, 기능적 규칙만으로는(그리드, 가는 선, 왼쪽 정렬 텍스트, 인덱스 목록, 통계 스트립, 하나의 악센트) 이제 모든 디자인 시스템이 이미 가지고 있는 것과 동일한 결과를 생성합니다. 깔끔하지만 새롭지 않으며 스위스 스타일이라고 인식되지 않습니다. 스위스 학교를 독특하게 만든 것은 포스터였습니다: 이미지로 사용된 서체, 대담한 색상 평면, 기하학, 스케일 긴장 및 볼 수 있는 구조. 그 언어를 인터페이스로 가져오십시오.

출처는 두 측면에서 같은 것을 말합니다. 플랫 디자인에 대한 연구(아리스토바 & 바실리에바)는 플랫 웹 디자인을 국제 스타일로 추적하고, 그 확산이 웹사이트를 획일화하고 각 사이트와 기관의 정체성을 약화시킨다고 경고합니다. 디자인 역사 교과서는 스위스 스타일이 보편화되면서 그 시각적 언어가 덜 혁신적이 되었다고 언급합니다. 치료법은 원칙을 버리는 것이 아닙니다. 원래 디자이너들이 했던 방식대로, 각 콘텐츠 조각에 대한 특정 형태를 찾는 방법으로 사용하는 것입니다.

규칙: 랜딩 페이지, 마케팅 사이트 또는 브랜드 페이지에는 최소 세 가지 시그니처 무브가 필요합니다. 하나는 영웅에 있고, 적어도 두 개는 다른 섹션에 있습니다. 제품 UI(대시보드, 앱)는 기능적으로 유지되지만, 하나의 포스터 순간을 가집니다: 페이지 헤더, 로그인 화면, 빈 상태 또는 섹션 구분선.

시그니처 무브(각각 출처의 포스터 예제에서 본 원칙에서 비롯됨; 원칙을 사용하고 절대 포스터를 재현하지 마십시오):

#	무브	UI에서의 방법	CSS
1	건축으로서의 글자 (발머)	그리드 모듈로 구축된 단어 또는 이니셜: 열 선으로 분할된 거대한 글자, 또는 사각형으로 조립된 글자. 아랍어에서는 정방 쿠픽이 자연스러운 동등 표현이며, 그리드 위에 구축된 스크립트이기 때문입니다. SVG에서 정사각형으로 그려지고 가독성이 유지되는 단어 마크 또는 영웅 단어에 사용하십시오.	모듈 그리드의 SVG `<rect>`; 셀의 `grid`
2	거대하게 자른 서체 (켈러)	뷰포트보다 큰 제목, 하나 또는 두 개의 가장자리에서 잘림. 페이지의 정체성은 단어 자체입니다.	`font-size: 28vw; line-height: .8; margin-inline-start: -.05em;` 섹션 `overflow: clip`
3	맞물리는 서체 (호프만)	음수 행간으로 쌓인 단어들이 서로 닿거나 겹쳐 하나의 타이포그래픽 블록을 형성함.	`line-height: .75`, 음수 마진, 두 번째 색상의 `mix-blend-mode: multiply`
4	회전된 평면 (뮐러-브록만)	콘텐츠 블록, 그리드 또는 작은 정사각형의 흩어짐이 직선 그리드에 대해 45° 또는 90° 회전된 평면에 배치됨.	래퍼의 `transform: rotate(-45deg)`; 텍스트 내부를 읽을 수 있게 유지하거나 90° 회전
5	형상-배경 기하학 (호프만)	잉크 또는 강한 팔레트 색상의 하나의 큰 원, 반원 또는 고리, 화면 가장자리에서 잘림. 텍스트는 형태 내부에 위치하거나 감쌈.	`border-radius: 50%` 요소 / SVG, `clip-path`, `shape-outside`
6	세로 단어 열 (발머)	하나의 단어가 세로로 설정된 좁은 전체 높이 색상 열. 아랍어: 단어 전체를 회전시킴(절대 글자를 쌓지 마십시오).	`writing-mode: vertical-rl`, `transform: rotate(180deg)`
7	색상 필드 + 잉크 블록 (켈러)	강한 필드 색상의 전체 섹션에 텍스트를 담은 단색 검정 사각형, 또는 가장자리에서 가장자리로 만나는 두 개의 강한 색상.	그리드 위의 두 블록, 그림자 없음
8	콘텐츠로서의 그리드 (뮐러-브록만)	의도적으로 그려진 그리드 선, 데이터, 숫자 또는 텍스트가 셀에 스냅됨. 시간표, 가격 그리드 또는 섹션 인덱스에 사용하십시오.	셀의 테두리 또는 `repeating-linear-gradient` 선
9	한 줄의 스케일 긴장	동일한 기준선에 200px 단어 옆에 12px 메타데이터.	`align-items: baseline`이 있는 flex
10	톤 오버타입	두 개의 디스플레이 단어가 겹쳐짐. 하나는 뒤에 밝은 회색, 다른 하나는 앞에 잉크 또는 종이 색상, 그리드에서 오프셋됨.	그리드 셀 내부의 absolute positioning
11	오브제 영웅 (바젤 자흐플라카트)	실제 물체 하나가 클로즈업되어 실물보다 크게, 잘리거나 꼭 맞게 잘려 촬영됨. 이름과 한 가지 사실만 있음.	`object-fit: cover`, 8-12 열에 걸친 이미지, 가장자리에서 잘림
12	포토몽타주 (매터)	매우 다른 스케일의 두세 장의 사진(거대한 세부 사진, 작은 광각 뷰)이 그리드 필드로 잘리고, 서체가 그 위나 사이에 배치됨.	`overflow: clip`이 있는 그리드 필드, 필드 가장자리에 정렬된 이미지
13	대면 (호프만)	서로 다른 두 요소가 의도적으로 만남: 기하학적 형태에 대한 문자, 빈 필드에 대한 조밀한 텍스트 블록, 직선 그리드에 대한 둥근 형태, 흰색에 대한 검정.	가장자리나 모서리를 공유하는 두 개의 그리드 영역, 종종 오버플로가 잘림

7. 코딩하고 검토하라

기본 CSS는 2부에 있습니다. references/looks.md는 각 룩에 대한 서체 쌍, 구성 규칙 및 테스트된 CSS 발췌문을 제공합니다.
필요에 따라 SwiftUI, HTML/CSS, React, Vue, Flutter, Svelte, Angular, Tailwind, 나열된 다른 라이브러리로 렌더링하십시오. 기술 스택을 한 번에 선택하십시오.
완료 후 검토 체크리스트를 실행하십시오(5부).

2부 — 그리드, 간격, 서체, 색상 및 기본 CSS

그리드

12열 그리드가 기본값입니다(8열 또는 4열도 가능). 필요할 때 사용자 지정 열 수를 사용하십시오(예: 시간표의 경우 7, 팀의 경우 4, 격자 무늬의 경우 6, 레이아웃을 지나치게 결정하지 않는 모든 것).
- 8열: 더 큰 콘텐츠 블록, 제품 갤러리.
- 4열: 포스터 레이아웃, 도구 모음, 탐색.
기준선 그리드: 8px 단위. 모든 여백, 패딩 및 간격은 8px의 배수여야 합니다: 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 272, 288, 304, 320.
열 간격: 24px(기준선 단위의 3배). 필요할 때 16px(2배) 또는 32px(4배).
컨테이너: 최대 너비 1280px(160 기준선 단위). 포스터 스타일 페이지의 경우 컨테이너를 없애고 전체 너비로 가십시오.

기본 CSS:

:root {
  --grid-columns: 12;
  --grid-gap: 24px;
  --baseline: 8px;
  --container-max: 1280px;
}

콘텐츠가 그리드를 벗어나도록 허용하십시오: 전체-피(ELL) 배경, 오버플로가 있는 이미지, 음수 마진. 그리드는 제약이 아닌 도구입니다.

간격

모든 간격은 기준선 단위(8px)의 배수입니다. 스택 및 인라인 간격에 대한 기본 시스템은 다음과 같습니다:

토큰	값	용도
`--space-1`	8px	촘촘한 요소 내부, 아이콘 및 텍스트
`--space-2`	16px	단락 간격, 작은 카드 패딩
`--space-3`	24px	열 간격, 표준 패딩
`--space-4`	32px	섹션 간격, 큰 카드 패딩
`--space-5`	48px	주요 섹션 상단/하단
`--space-6`	64px	큰 섹션 나누기
`--space-7`	80px	페이지 섹션 사이
`--space-8`	96px	주요 포스터 여백
`--space-9`	128px	큰 여백
`--space-10`	160px	극적인 여백

서체

패밀리: 하나의 서체 패밀리. 산세리프가 기본입니다. [무료] Helvetica Now, Neue Haas Grotesk, Inter, Work Sans, Fira Sans. [유료] Helvetica Neue, Akzidenz Grotesk, Univers, Frutiger.
- 아랍어 + 라틴어 쌍: Noto Sans Arabic + Inter; Tajawal + Helvetica Neue; Cairo + Fira Sans. 아랍어 및 라틴어 대안에 대한 @font-face를 사용하십시오.
스케일: 가파른 스케일. 기본값(Inter 사용):
- 본문: 16px / 1.5 (24px 줄 높이, 정확히 3 기준선 단위)
- 작은 본문/메타데이터: 12px / 1.333... (16px 줄 높이, 2 기준선)
- 제목: 24, 32, 48, 64, 80, 96, 128, 160, 192px. clamp()로 동적으로 만드십시오.
정렬: 왼쪽 정렬(flush left, rag right). 아랍어는 오른쪽 정렬(flush right). 절대 중앙 정렬하지 마십시오. 가운데 정렬은 AI 디자인의 가장 큰 신호입니다.
줄 높이: 본문 텍스트의 경우 1.4-1.6. 제목은 더 좁게: 0.8-1.1(크기에 따라 다름). 아랍어는 더 큰 줄 높이가 필요합니다(최소 1.6, 최대 2.0).
자간: 제목의 경우 -0.01em ~ -0.05em. 대문자 제목의 경우 +0.05em ~ +0.1em. 모두 소문자 제목의 경우 자간을 사용하지 마십시오.

기본 CSS:

:root {
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-heading: 'Inter', 'Helvetica Neue', sans-serif;
  --font-size-body: 16px;
  --line-height-body: 1.5;
  --font-size-small: 12px;
  --line-height-small: 1.333;
}

색상

색상은 콘텐츠에서 비롯됩니다. 브랜드 색상은 바탕이 되며 룩은 파트너를 제공합니다. 그렇지 않으면 references/looks.md에서 룩을 선택하십시오(위 4단계 참조).

대비 규칙:

본문 텍스트는 최소 4.5:1(소형 텍스트의 경우 WCAG AA) 또는 3:1(대형 텍스트의 경우, 24px/19px bold)이어야 합니다.
메타데이터는 3:1이면 충분합니다.
하나의 텍스트 색상이 모든 표면에서 작동하지 않습니다. 표면 배경이 밝은 곳과 어두운 곳에 대해 별도의 색상을 설정하십시오.

레이아웃 레시피

이것들은 섹션 템플릿입니다. 직접 레이아웃하지 말고 각 섹션에 대해 하나를 선택하고, 그리드가 기본값보다 더 좁은 너비를 허용하는 경우를 위해 포장하고, 적절한 룩으로 스타일을 지정하고, 6단계의 시그니처 무브로 강화하십시오.

영웅:

A1 grid-template-columns: subgrid; grid-column: 1 / -1; display: grid; grid-template-areas: 'stack'; (하나의 아이템이 거대한 서체 또는 이미지, 다른 하나는 텍스트)
A2 grid-column: 1 / 7; 이미지 grid-column: 7 / -1; (50/50 분할)
A3 grid-column: 1 / 10; 큰 서체; grid-column: 10 / -1; 메타데이터
A4 전체 너비 배경, 그리드 위에 쌓인 텍스트

본문:

B1 grid-column: 2 / 7; 본문; grid-column: 8 / 12; 메타데이터
B2 display: flex; gap: var(--space-4); flex-wrap: wrap; 항목은 flex: 1 1 300px;
B3 grid-template-columns: subgrid; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); (카드 그리드)
B4 grid-column: 1 / 6; 이미지; grid-column: 7 / -1; 텍스트
B5 grid-column: 6 / -1; 이미지; grid-column: 1 / 5; 텍스트

풋터:

F1 grid-template-columns: subgrid; grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;

기본 CSS 파일

/* 스위스 UI 디자인 기본값 */
:root {
  --grid-columns: 12;
  --grid-gap: 24px;
  --baseline: 8px;
  --container-max: 1280px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 160px;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-heading: 'Inter', 'Helvetica Neue', sans-serif;
  --font-size-body: 16px;
  --line-height-body: 1.5;
  --font-size-small: 12px;
  --line-height-small: 1.333;
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: start; /* LTR: left, RTL: right */
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

/* 스위스 플러시-스타트 타이포그래피 */
h1, h2, h3, h4, h5, h6, p, ul, ol {
  text-align: start;
}

3부 — 아랍어 및 RTL

일반 원칙

dir="rtl"을 html 요소에 설정하십시오. 논리적 CSS 속성(margin-inline-start, padding-inline-end)이 물리적 속성보다 우선합니다.
기본 CSS는 계속 작동하지만, text-align은 start여야 합니다(left가 아님).
아랍어는 더 큰 줄 높이가 필요합니다: 본문 텍스트의 경우 1.8, 제목의 경우 1.2-1.6. 스케일에서 크기를 테스트하십시오.
아랍어 서체: Noto Sans Arabic가 기본(무료). 더 세련된 느낌을 위해 Tajawal, Cairo, Almarai, Mada.
라틴어 서체: 각 아랍어 서체와 x-높이와 굵기가 일치하는 파트너. 예: Inter (Noto Sans Arabic과 좋은 페어), Helvetica Neue (Tajawal), Fira Sans (Cairo).

아랍어 특정 레이아웃

열 순서: 생각해 보십시오. 전통적인 아랍어 출판물은 LTR 디자인보다 더 대칭적인 그리드를 선호합니다. 비대칭은 여전히 작동하지만 무거운 요소는 오른쪽에 있어야 합니다.
시그니처 무브: 정방 쿠픽 스크립트는 모듈형, 그리드 기반 문자 형태를 생성합니다. 그리드 위에 SVG로 렌더링하십시오. 자연스러운 Ballmer 스타일의 건축학적 문자입니다.
시그니처 무브: 세로 단어는 단어 전체를 회전시킵니다(writing-mode: vertical-rl; transform: rotate(180deg);). 글자를 쌓지 마십시오.
번역: 사용자가 아랍어를 추가하는 경우, 아랍어 단어를 번역하거나 현지화하십시오. 사용자에게 가정한 내용을 말하십시오.
글자: 일부 아랍어 글자는 LTR보다 더 넓습니다. 특히 'ص', 'ض', 'ط', 'ظ'. 열 너비를 계산할 때 이것을 고려하십시오.
대비: 아랍어 텍스트는 동일한 크기의 라틴어 텍스트보다 더 가늘게 보이는 경우가 많으므로, 무거운 글자 굵기를 사용하십시오. 활성화된 텍스트의 경우 굵기 500이 기본이고, 제목의 경우 700입니다.

4부 — 컴포넌트

탐색

최소화된 탐색: 로고, 3-5개의 링크, 하나의 액션. 햄버거 메뉴 없음.
왼쪽 정렬, 오른쪽에 액션. 또는 왼쪽에 로고, 오른쪽에 링크.
배경: 투명 또는 단색. 절대 반투명 오버레이 없음.

카드

그림자 없음, 테두리 없음 또는 1px 단색 테두리. 테두리가 없으면 패딩으로 카드를 분리하십시오.
패딩: --space-4 (32px).
제목: 굵게, 왼쪽 정렬.

버튼

그림자 없음, 둥근 모서리 없음. 직사각형.
패딩: 12px 24px (수직 1.5 기준선, 수평 3 기준선).
호버: 배경색 반전 또는 10% 어둡게.

양식

라벨: 위, 왼쪽 정렬.
입력: 1px 단색 테두리, 패딩 12px, 그림자 없음.
포커스: 2px 단색 테두리(색상은 룩의 텍스트 색상).

표

1px 단색 테두리, 머리글은 굵게, 본문은 일반.
오른쪽 정렬 숫자.
줄무늬 행은 허용되지만 필요하지는 않습니다.

도구 모음 / 사이드바

배경: 단색, 하위 탐색은 작은 서체 및 굵게.
아이콘: 16px, 서체와 일치하는 색상.

5부 — AI처럼 보이지 않게: 검토 체크리스트

렌더링된 화면에서 각 항목을 확인하십시오. 문제를 찾으면 목록의 교정을 적용하십시오.

문제	AI 신호	교정
중앙 영웅	제목, 부제목, CTA 버튼이 스택되어 중앙에 있음.	무거운 요소를 한쪽으로 옮기고, 다른 쪽은 여백으로 균형을 맞추십시오.
부드러운 그림자 (그라데이션, 블러, 반투명도)	카드, 모달, 버튼, 드롭다운의 그림자.	그림자를 제거하고 단색 테두리 또는 배경 색상 전환을 사용하십시오.
둥근 모서리	`border-radius: 8px` 이상은 어디에나.	`border-radius: 0` 또는 필요할 때만 2px.
그라데이션 배경	특히 블루-투-퍼플 그라데이션.	단색 플랫 색상.
반투명 오버레이	탐색, 헤더, 히어로 이미지 위의 오버레이.	불투명한 단색 오버레이.
글머리 기호 없는 3개의 기능	3개의 열, 각각 아이콘, 제목, 2문장 설명.	다른 레이아웃을 사용하거나, 이상하게 만들거나, 실제 데이터를 보여주십시오.
"가상의" 사진	AI 생성 인물, 일반적인 스톡 사진.	UI 목업의 경우 실제 사진이나 그리드 기반 추상 그래픽을 사용하십시오.
마케팅 채우기	"혁신적인", "획기적인", "힘을 발휘하세요" 유형의 언어.	사실, 숫자, 구체적인 동사.
중앙 정렬된 아이콘 + 텍스트	카드 내의 모든 것, 특히 아이콘 + 제목 + 설명이 중앙에 있음.	왼쪽 정렬. 아이콘은 위나 왼쪽에 있을 수 있습니다.
동일한 그리드, 모든 섹션	모든 섹션이 동일한 열 구성을 가짐. 각 섹션의 그리드 크기를 변경하십시오.
너무 많은 여백	너무 많은 여백 = 많은 화이트 스페이스. 포스터 레이어를 추가하거나 여백을 줄이십시오.
장식적인 요소	장식적인 선, 배지, 아이콘 장식. 그것이 정보를 전달하지 않으면 제거하십시오.

6부 — 출처: 스위스 학교 (책자 The Swiss School of Design에서 발췌)

태생

에른스트 켈러 (취리히 응용 예술 학교) 1918년: "디자인 해결책은 문제의 내용에서 나와야 합니다." 그의 수업은 고정된 스타일을 가르치지 않았습니다. 각 프로젝트는 다른 해결책을 가졌습니다. 이 원칙은 이 스킬의 기초입니다.
취리히 학교 (구체 예술, 맥스 빌): 수학적 구성, 순수 기하학적 평면, 첫 번째 레이아웃 그리드(1930년대 후반).
바젤 학교 (신즉물주의, 에밀 루더, 아민 호프만): 오브제, 사진, 형태의 대비.

원칙

그리드는 논리입니다. 보이거나 보이지 않습니다. 어떻게든 있습니다. 구조를 제공합니다.
비대칭은 시각적 힘의 분배를 통한 균형입니다. 대칭은 정적입니다. 비대칭은 역동적입니다.
산세리프 서체는 이미지입니다. 서체는 단지 텍스트가 아닙니다. 그것은 형태, 질감 및 구조를 가진 그래픽 요소입니다.
사진은 사실입니다. 그림이 아닌 사진. 클로즈업되고, 선명하며, 사실적입니다.
색상은 기능적입니다. 평면, 단색, 방해받지 않음. 장식적인 것보다 식별하는 것.
내용이 형식을 결정합니다. 모든 디자인 결정은 제공된 정보를 가장 잘 전달하는 방법에서 비롯됩니다.
명확성이 가장 중요합니다. 어떤 미학보다도 가독성과 가독성을 우선시합니다.
객관성은 정직함입니다. 디자이너는 선전가가 아닌 정보의 중립적인 전달자입니다. 과장 없음, 장식 없음.

전 세계적 영향

1950년대까지 스위스 스타일은 국제 스타일이 되었습니다. 그 원칙은 전 세계 디자인 학교와 기관에 채택되었습니다. 이 스타일은 21세기 초 디지털 인터페이스의 기초가 되었습니다. 이 스킬의 작업은 그 기초를 그 위에 구축하는 것을 의미합니다: 초기 장식(스큐어모피즘, 과도한 그림자)을 제거하고 기능적이고 사실적인 프레젠테이션으로 대체하는 움직임. 그럼에도 불구하고, 이 스타일이 보편화됨에 따라 혁신이 멈추고 변형이 획일화되었습니다. 이 스킬은 스위스 기법을 포스터 수준의 강도로 되돌려 이를 해결합니다.

즐겨 사용하는 AI에게 물어보기

문서