IndexStyle

작품 자체에서 써 내려간 디자인 양식 사전.

순수한 HTML이다.어떤 브라우저에서도 어떤 기기에서도앱이나 계정 없이 열리고,기계도 같은 페이지를 그대로 읽는다.

항목776

사전

스타일 이름이나 만들고 싶은 것을 검색하세요. 이름 일치를 우선하고 용도, 인상, 매체로 가까운 대안을 더합니다.

예시바우하우스고급스러운 채용 사이트신뢰할 수 있는 금융 앱

24/776건 표시

529

Gustavian Style — 스투레호브 성 녹색 방 1781년 — Wikimedia Commons / CC BY-SA 4.0 · © Holger.Ellgaard

Gustavian Style

グスタヴィアン様式 / 1770s–1790s / 양식 / 가구와 인테리어

구스타브 3세 아래에서 성립한 스웨덴의 신고전이다. 본보기는 루이 16세 양식의 형식적인 고전주의였고, 왕은 베르사유를 찾았으며 프랑스 장인을 궁정에 불러들였다. 다만 값비싼 재료는 국산 유리로 대체되었다.

절제된 신고전의 윤곽으로, 루이 16세 양식의 형태를 그대로 옮겨 놓았다. / 수정으로 깎은 장식이 작은 투명 유리 구슬로 바뀌어 있다. / 코발트빛 파란 유리가 투명한 유리 사이에 조금만 끼어든다. / 도금한 금구와 사슬이 유리를 잇는 뼈대로 겉에 드러나 있다.

design.md이미지 프롬프트

530

Droog — 마르셀 반더르스 『Knotted Chair』 1996년 — Wikimedia Commons / CC BY 4.0 · © Sandra Fauconnier

Droog

ドローホ / 1990s– / 양식 / 가구와 인테리어

1990년대 네덜란드 디자이너들이 모여 내세운 조형으로, droog는 네덜란드어로 마르다라는 뜻이다. 버려진 서랍이나 매듭처럼 익숙한 물건을 그대로 구조로 삼고 마감으로 감추지 않는다. 소박함과 재치를 공통의 유형으로 삼았다는 점에서 같은 시기의 매끈한 산업 디자인과 갈라진다.

출처가 다른 기성 부품들이 색과 흠집을 맞추지 않은 채 하나의 가구로 묶인다 / 임시로 고정한 듯한 띠와 끈이 그대로 최종 구조로 남는다 / 재료를 다룬 흔적이 완성된 표면에 남아 매듭과 이음매를 깎아 내지 않는다 / 같은 설계라도 부재가 매번 달라 똑같은 개체가 둘 없다

design.md이미지 프롬프트

531

Machine Art — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Machine Art

マシン・アート / 1934 / 양식 / 근대 디자인 운동

1934년 뉴욕 현대미술관이 연 전시의 이름이다. 스프링, 냄비, 계측기 같은 양산 실용품을 받침대에 올려 조각과 같은 방식으로 보여 주었다. 전시장은 19세기 사암 건물의 몰딩을 덮어 가린 채 꾸몄으며, 장식 없는 물건을 장식 없는 그대로 보여 주는 것이 전시의 조건이었다.

받침대 위에 실용적인 양산 부품이 하나씩 간격을 두고 놓인다 / 벽과 천장의 몰딩이 덮여 배경 면에 무늬가 전혀 없다 / 대상은 스프링, 냄비, 계측기처럼 애초에 보여 주려고 만든 물건이 아니다 / 작가 칸에 개인 이름이 아니라 제조 회사 이름이 늘어선다

design.md이미지 프롬프트

532

Xerox Star Interface — Xerox 8010 Star(ViewPoint)의 데스크톱과 아이콘 — Wikimedia Commons / CC BY 2.0 · © J R

Xerox Star Interface

ゼロックス・スター・インターフェース / 1981–1990s / 양식 / 플랫폼 화면 언어

1981년 Xerox 8010의 화면이 정한 설계 언어다. 폴더, 수발신 바구니, 파일 서랍 같은 사무용품을 이름표가 붙은 그림으로 늘어놓았고, 당시 안내 책자는 그것을 전자 책상 위라고 불렀다. 화면 속 물건은 마우스로 자유롭게 옮기고 복제하고 버릴 수 있다.

화면의 그림에는 반드시 글자 이름표가 붙어 그림 하나에만 의미를 맡기지 않는다 / 그림은 폴더, 수발신 바구니, 파일 서랍처럼 사무 책상 위에 있는 물건을 옮겨 놓은 것이다 / 물건을 마우스로 집어 옮길 수 있고 이동과 복제와 삭제가 같은 조작의 계열을 이룬다 / 표 계산은 행과 열의 격자로 나타나고 격자를 다루는 명령이 메뉴에 모인다

design.md이미지 프롬프트

533

PLATO Terminal Screen — PLATO V 단말기의 플라스마 화면 1981년 — Wikimedia Commons / CC BY 3.0 · © Mtnman79 [1]

PLATO Terminal Screen

PLATO端末の画面 / 1972–1980s / 양식 / 플랫폼 화면 언어

일리노이 대학이 1960년대 초에 시작한 교육용 네트워크 PLATO의 화면이다. 플라스마 평면판과 손으로 만지는 화면 위에 TUTOR의 명령이 좌표로 글자와 그림을 직접 놓기 때문에 문서 같은 줄 흐름이 없다. 게시와 대화의 화면도 여기서 유형이 되었다.

검은 면 위에 빛나는 주황 한 색으로만 글자와 선이 나타난다 / 글자가 줄 흐름을 따르지 않고 좌표로 놓여 그림 한가운데에도 끼어든다 / 글자와 선그림이 같은 면에 겹치고 테두리로 영역을 나누지 않는다 / 화면을 손가락으로 직접 눌러 답하는 문제가 있다

design.md이미지 프롬프트

534

Breeze — KDE Plasma 5의 Breeze, 밝은 배색(Kubuntu 20.10) 2020년 — Wikimedia Commons / CC BY 4.0 · © Kubuntu, Breeze

Breeze

ブリーズ / 2014– / 양식 / 플랫폼 화면 언어

KDE가 Plasma 5와 함께 도입한 기본 시각 양식이다. 발표문은 스스로 고대비의 평면적인 테마라고 설명하며, 그림을 단순하고 단색에 가깝게 정리한다. 장식 대신 글자 짜임에 기대어 요소를 구별하게 하고, 밝은 판과 어두운 판을 처음부터 짝으로 갖춘다.

음영이 없는 평면이고 요소의 경계는 색 차이와 대비만으로 드러난다 / 아이콘과 그림이 단색에 가깝게 정리되어 쓰는 색 수가 적다 / 제목과 본문의 대비가 장식을 대신하고 글자 짜임이 화면의 뼈대가 된다 / 같은 그림 그대로 밝은 판과 어두운 판이 짝으로 존재한다

design.md이미지 프롬프트

535

Acme — Plan 9 from Bell Labs의 acme 화면 — Wikimedia Commons / CC BY-SA 4.0

Acme

アクメ・インターフェース / 1994– / 양식 / 플랫폼 화면 언어

Rob Pike가 1994년 논문에서 보인, 창과 셸과 편집기를 하나로 합친 화면이다. 메뉴도 아이콘도 없고 화면 위의 어떤 문자열이든 가운데 버튼으로 실행하고 오른쪽 버튼으로 열 수 있다. 창은 세로 열에 쌓이며 한 줄짜리 태그와 본문이라는 두 단으로만 이루어진다.

창이 세로 열에 쌓이고 각 창은 한 줄짜리 태그와 본문 두 단으로 이루어진다 / 스크롤 막대가 본문 왼쪽 끝에 있고 오른쪽 끝에는 아무것도 놓이지 않는다 / 가운데 버튼으로 문자열을 훑으면 누르고 있는 동안에만 그 문자열에 밑줄이 그어진다 / 본문은 옅은 노랑, 태그는 옅은 하늘색이며 누를 버튼도 아이콘도 하나 없다

design.md이미지 프롬프트

536

Oberon System Interface — Oberon-0 화면, 태그 행과 빈틈없이 채운 면 — Wikimedia Commons / CC BY-SA 4.0 · © PeterEasthope

Oberon System Interface

オベロン・システムの画面 / 1988– / 레이아웃 / 플랫폼 화면 언어

비르트와 구트크네히트가 ETH에서 1986년부터 89년 사이에 만든 시스템의 화면이다. 창을 겹치지 않고 화면을 세로 띠로 나눈 뒤 그 안을 위아래로 채운다. 화면 위의 어떤 글자든 M.P 형태이면 가운데 버튼으로 실행할 수 있어 메뉴라는 전용 부품을 두지 않는다.

창이 겹치지 않는다. 화면이 먼저 세로 띠로 나뉘고 띠 안에서 위아래로 채워진다 / 오른쪽에 좁은 띠가 있어 위에는 기록, 아래에는 명령을 늘어놓은 텍스트가 놓이고 왼쪽의 넓은 띠가 작업용이다 / 각 뷰어 위쪽에 한 줄 높이의 가는 테두리가 있고 문서 이름과 System.Close 같은 명령이 글자로 늘어선다 / 1픽셀 1비트의 흑백이다. 테두리는 가는 직선뿐이고 그림자도 둥근 모서리도 계조도 없다

design.md이미지 프롬프트

537

Ribbon — Office 2007 양식의 리본과 상황별 탭 — Wikimedia Commons / CC BY-SA 4.0 · © Halil Şimşek P

Ribbon

リボン / 2007– / 레이아웃 / 마이크로소프트 UI

창 위쪽에 명령을 탭의 열로 늘어놓는 명령 띠로, 메뉴 막대와 도구 막대를 모두 대신한다. Office 2007에서 도입되었고 마이크로소프트는 탭, 그룹, 상황별 탭, 갤러리라는 어휘를 공식 지침에서 정의했다. 명령에는 반드시 라벨이 붙고 쓰는 빈도에 따라 크기가 달라진다.

창 맨 위에 탭으로 바뀌는 띠가 늘 자리 잡고 그 높이는 48픽셀로 고정된다 / 띠 안은 이름이 붙은 그룹으로 나뉘고 그룹 이름이 구획의 아래쪽에 늘어선다 / 명령의 그림은 32×32와 16×16 두 단계이고 자주 쓰는 명령만 큰 그림으로 앞에 놓인다 / 선택한 대상의 종류에 따라 색이 붙은 상황별 탭이 나타나고 그 탭 묶음의 이름은 Tools로 끝난다

design.md이미지 프롬프트

538

Solarized — Solarized Light를 적용한 Xcode 4 2011년 — Wikimedia Commons / CC BY 2.0 · © Jason Brennan from Ottawa, Canada

Solarized

ソラライズド / 2011– / 양식 / UI 스타일

Ethan Schoonover가 값까지 함께 공개한, 터미널과 편집기를 위한 16색이다. 여덟 개의 바탕색과 여덟 개의 강조색으로 이루어지고 바탕색의 CIELAB 명도 차를 대칭으로 잡아 두어 밝은 바탕과 어두운 바탕을 바꿔도 읽는 결이 달라지지 않는다. 밝기 차이를 낮추고 색상의 차이로 낱말을 구별한다.

바탕색이 순수한 검정도 흰색도 아니어서 하나는 청록으로, 하나는 노랑 쪽으로 기운다 / 본문과 바탕의 명도 차가 작아 흰 바탕에 검정보다 약한 힘으로 읽게 한다 / 여덟 강조색의 밝기가 거의 고르고 색상의 차이만으로 구별된다 / 밝은 바탕과 어두운 바탕을 바꿔도 같은 강조색이 같은 역할로 나온다

design.md이미지 프롬프트

539

Skeleton Screen — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Skeleton Screen

スケルトン・スクリーン / 2013– / 기법 / UI 스타일

읽어 들이는 동안 회전 표시를 내지 않고 내용이 들어오기 전의 빈 화면을 먼저 보여 준 뒤 거기에 정보를 조금씩 흘려 넣는 방법이다. Luke Wroblewski가 2013년에 자신이 만든 앱 Polar에서 얻은 반성으로 이 이름을 붙여 소개했다. 기다리게 하고 있다는 사실이 아니라 진행되고 있다는 것을 보여 준다.

읽어 들이는 동안 회전 표시도 진행 막대도 나오지 않는다 / 본문과 이미지가 들어갈 자리에 같은 치수의 민무늬 면이 먼저 놓여 있다 / 내용이 오기 전에 배치가 확정되어 있어 도착해도 요소가 움직이지 않는다 / 정보가 한꺼번에 나오지 않고 영역별로 차례차례 채워진다

design.md이미지 프롬프트

540

Stamen Map Styles (Toner, Terrain, Watercolor) — Stamen Design 『Watercolor』 타일을 사용한 지도 2022년 — Wikimedia Commons / CC BY-SA 4.0 · © Alexschneider250

Stamen Map Styles (Toner, Terrain, Watercolor)

スタメンの地図様式 / 2010s– / 양식 / 정보 디자인

Stamen Design이 공개한 이름 붙은 세 가지 지도 양식으로, Toner는 흑백 두 값, Terrain은 음영과 식생의 색, Watercolor는 종이 결에 번지는 면으로 이루어진다. 배경 지도의 겉모습을 배색 설정이 아니라 화풍으로 고를 수 있게 했다는 점이 그전의 웹 지도와 다르다.

Toner는 검정과 흰색만으로 그려지고 회색의 중간 계조가 없다 / Watercolor에서는 바다와 뭍의 경계가 붓끝처럼 번지고 확대해도 종이 결이 남는다 / Watercolor의 수면은 파랑에 청록과 보라가 섞이고 도로는 주황에서 붉은 갈색으로 흔들린다 / 주기와 선과 바탕색이 서로 다른 층으로 나뉘어 있어 필요 없는 층을 뺀 상태로 배포할 수 있다

design.md이미지 프롬프트

541

Single-Serving Site — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Single-Serving Site

シングルサービング・サイト / 2008– / 레이아웃 / 웹에서 읽는 것

전용 도메인을 하나 잡고 한 페이지만으로 한 가지 일만 하는 사이트다. 2008년 2월 Jason Kottke가 이름을 붙였고 독자들이 사례를 사백 통쯤 보내오면서 하나의 유형으로 자리 잡았다. 안내도 돌아볼 곳도 없이 물음에 대한 답이 화면 가득 나오고 그것으로 끝난다.

도메인 이름이 그대로 물음이 되고 페이지의 내용은 그 답 한 낱말뿐이다 / 제목도 문단도 없이 한 낱말이나 한 장이 화면 한가운데를 차지한다 / 메뉴도 검색도 바닥글 링크도 없다. 다음에 갈 곳이 마련되어 있지 않다 / Is It Christmas?나 Is Twitter Down?처럼 예 또는 아니요로 답할 수 있는 제목이 많다

design.md이미지 프롬프트

542

ADV / NVL Text Layout — 『쓰르라미 울 적에』 한국어판의 NVL형 화면 — Wikimedia Commons / Public domain

ADV / NVL Text Layout

ADV/NVL(ノベルゲームの文字組み) / 1990s– / 레이아웃 / 놀이와 카드

노벨 게임의 글자 짜임에는 이름이 붙은 유형이 둘 있는데, ADV는 대사와 지문을 한 줄씩 화면 아래쪽 창에 내보낸다. NVL은 화면 전체를 차지하는 창에 여러 줄을 쌓고 구분마다 쪽을 넘긴다. 제작 환경 Ren'Py의 공식 문서가 이 둘을 한 쌍으로 정의하고 있다.

ADV에서는 화면 아래에 가로로 긴 창이 늘 자리 잡고 거기에 한 번에 한 줄만 나온다 / NVL에서는 글자가 화면 가득 퍼지고 읽어 나간 줄이 위로 쌓인다 / NVL은 쪽을 넘길 때 쌓인 줄이 한꺼번에 사라지고 다음 쪽이 빈 상태에서 시작한다 / 선택지가 나오는 방식이 유형에 따라 달라 NVL에서는 전체 화면 메뉴가 아니라 지금 읽는 글 바로 뒤에 선택지가 늘어선다

design.md이미지 프롬프트

543

GitHub Primer — GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT

GitHub Primer

GitHub Primer / 2017– / 양식 / 플랫폼 화면 언어

GitHub의 디자인 시스템은 빽빽한 개발 흐름을 색, 글자, 아이콘, 간격, 컴포넌트의 공통 규칙으로 바꾼다. 장식보다 작업의 흐름을 앞세워 좁은 면에 많은 상태와 행동을 담으면서도 접근성과 반응형 동작을 포기하지 않는다.

중립적인 면과 파란 링크, 절제된 상태색 / 짧은 행동 이름과 함께 쓰는 Octicon / 목록, 탭, 사이드바를 나누는 가는 테두리 / 정보가 빽빽해도 일정한 글자와 간격 단계

design.md이미지 프롬프트

544

Adobe Spectrum — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Adobe Spectrum

Adobe Spectrum / 2013– / 양식 / 플랫폼 화면 언어

Adobe의 여러 응용 프로그램을 잇는 디자인 시스템이다. 합리적, 인간적, 집중이라는 원칙 아래 데스크톱과 모바일 사이에서 밀도를 바꾸고, 도구가 많은 화면이 작품 자체의 주의를 빼앗지 않게 한다.

중립적인 면, 선택 상태에만 쓰는 선명한 색 / 아이콘, 글자, 테두리가 함께 비례해 바뀐다 / 가는 구분선으로 이어진 도구 모음과 속성 패널 / 창작물이 인터페이스보다 더 강하게 남는다

design.md이미지 프롬프트

545

Atlassian Design System — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Atlassian Design System

Atlassian Design System / 2012– / 양식 / 플랫폼 화면 언어

Jira와 Confluence의 복잡함을 공통 토큰, 콘텐츠 규칙, 간격, 그리드, 컴포넌트로 옮기는 시스템이다. 일관성이 신뢰를 만들고 많은 이슈, 문서, 상태를 계속 탐색할 수 있게 한다.

흰색과 옅은 회색 층, 파란색 주요 행동 / 둥근 카드와 캡슐 모양 상태 이름표 / 사이드바, 표, 상세 패널 사이의 뚜렷한 구분 / 토큰이 색, 간격, 모서리와 높이를 통제한다

design.md이미지 프롬프트

546

Ant Design — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Ant Design

Ant Design / 2015– / 양식 / 플랫폼 화면 언어

재사용할 수 있는 컴포넌트와 페이지 패턴으로 기업용 웹 애플리케이션의 엔트로피를 낮게 유지하는 디자인 시스템이다. 자연스러움, 확실함, 의미, 성장이라는 가치로 표, 폼, 위계, 상태를 체계화하면서 정보 밀도는 줄이지 않는다.

작은 글자와 가는 선으로 짠 빽빽한 표 / 파란색 주요 행동과 뜻이 분명한 상태색 / 일관된 폼, 페이지 나누기, 트리와 표 / 넓은 여백이 아니라 정렬과 반복으로 얻는 가독성

design.md이미지 프롬프트

547

Shopify Polaris — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Shopify Polaris

Shopify Polaris / 2017– / 양식 / 플랫폼 화면 언어

Shopify의 UI 프레임워크는 상품, 주문, 결제, 고객을 하나의 상거래 언어로 통일한다. 카드와 섹션이 판단을 나누고, 짧은 상태 및 행동 문구가 상점 운영의 다음 단계를 분명히 한다.

옅은 바탕 위에 쌓인 흰색 카드 / 성공이나 전진을 알리는 신호로 쓰이는 초록색 / 제목, 상태, 주요 행동을 페이지 위쪽에 모은 구성 / 상품, 주문, 결제 상태를 나타내는 작은 배지

design.md이미지 프롬프트

548

Black Dandyism — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Black Dandyism

ブラック・ダンディズム / 18th century– / 양식 / 패션사

재단과 몸가짐으로 스스로를 빚고 인종화된 시선에 맞서 다시 편집해 온 계보이다. 장식의 한 수준을 뜻하지 않는다. 규범을 알고 세부를 옮기며 존엄, 저항, 정체성을 한꺼번에 지닌다.

몸에 맞춘 정밀한 재단 / 모자와 칼라에서 넥타이와 구두까지 이어지는 완전한 선 / 고전 남성복 규범을 움직이는 색, 무늬 또는 몸짓 / 자신감 있고 정면을 향한 자기 표현

design.md이미지 프롬프트

549

Power Dressing — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Power Dressing

パワー・ドレッシング / 1970s–1980s / 양식 / 패션사

직장에서의 권위를 눈에 보이게 하는 옷차림이다. 1980년대의 날카롭게 재단된 큰 어깨 수트는 여성과 남성의 상승 이동을 나타냈고, 실루엣을 넓고 단단하게 만들면서 규범에 맞추라는 압력도 함께 품었다.

어깨를 넓히는 패드 재킷 / 잘록한 허리와 역삼각형 실루엣 / 어두운 소모직과 핀스트라이프 / 수트, 셔츠, 넥타이 또는 펌프스를 맞춘 구성

design.md이미지 프롬프트

550

Fashion Deconstruction — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Fashion Deconstruction

ファッションの脱構築 / 1980s– / 양식 / 패션사

옷을 매끈한 하나로 숨기지 않고 시접, 안감, 날것의 가장자리, 패턴, 비대칭 이음을 드러낸다. 단순히 파괴하는 것이 아니라 관습을 해체하고 그 부품으로 다른 몸을 세운다.

바깥으로 뒤집힌 시접과 안감 / 마감하지 않은 가장자리와 의도적인 올 풀림 / 비대칭 이음과 이동한 균형 / 패턴과 심지를 완성된 표면처럼 사용

design.md이미지 프롬프트

551

Camp Fashion — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Camp Fashion

キャンプ・ファッション / 19th century– / 양식 / 패션사

인공성, 과장, 연극성, 패러디와 과잉을 사랑하고 좋은 취향과 나쁜 취향 사이를 즐기는 감수성이다. 힘은 요란함만이 아니라 진지함을 부풀려 유머와 비평으로 뒤집는 데 있다.

몸의 크기를 넘어 과장된 실루엣 / 인공 재료와 지나친 장식 / 역사 복식과 대중문화의 인용 / 유머, 패러디와 연극적인 자세

design.md이미지 프롬프트

552

Mori Girl / Mori Kei — AI가 생성한 해석 이미지
AI 해석 이미지(참고 작품 아님)

Mori Girl / Mori Kei

森ガール/森系 / 2007– / 양식 / Japanese Street Fashion

도시에 사는 사람이 숲에 살 것 같은 소녀를 상상하며 만든 일본 거리 패션이다. 느슨한 겹침, 아이보리와 흙색, 자연스러운 질감, 오래된 소품이 느린 삶의 이야기로 이어진다.

느슨한 원피스와 스커트를 여러 겹으로 착용 / 채도가 낮은 아이보리, 갈색, 이끼색 / 레이스, 니트, 리넨, 울의 질감 / 가죽 신발, 바구니, 오래된 액세서리

design.md이미지 프롬프트

편집 방침

IndexStyle은 디자인 주변의 모든 용어를 싣지 않습니다. 독립 항목은 알아볼 수 있고 재현할 수 있으며 이웃 양식과 구별되는 시각 언어여야 합니다. 수록 기준

맨 위로