작품 자체에서 써 내려간 디자인 양식 사전.
순수한 HTML이다.어떤 브라우저에서도 어떤 기기에서도앱이나 계정 없이 열리고,기계도 같은 페이지를 그대로 읽는다.
| 항목 | 776 |
|---|
스타일 이름이나 만들고 싶은 것을 검색하세요. 이름 일치를 우선하고 용도, 인상, 매체로 가까운 대안을 더합니다.
481
visionOS 空間デザイン / 2023– / 양식 / 애플 UI
Apple이 Vision Pro를 위한 지침서에서 정한 화면의 언어다. 창은 유리라고 부르는 재질의 곧게 선 면이며, 주위의 실제 풍경이 비쳐 보이고 거울 반사와 그림자가 놓인 위치와 크기를 알려 준다. 점을 픽셀이 아니라 각도로 정의하므로 멀어져도 보이는 크기가 달라지지 않는다.
배경을 바꿀 수 없는 유리의 직립 면. 실제 풍경이 비치고 거울 반사와 그림자가 진다 / 기본 창은 1280x720 pt이며, 열린 직후에는 약 2미터 앞에 있고 보이는 너비는 약 3미터다 / 바라본 요소만 빛나는 호버 효과. 판정 영역은 모서리가 둥근 한 덩어리로 묶인다 / 테두리가 없는 volume에서는 닫기 버튼과 창 막대가 걸어간 쪽으로 방향을 돌린다
482
Windows 95 インターフェース / 1995–2001 / 양식 / 마이크로소프트 UI
Microsoft가 1995년 공식 지침서에 문서로 남긴 화면 언어다. 회색 면을 바깥 테두리와 안쪽 테두리의 두 선으로 파내어, 그림자의 방향만으로 누를 수 있는 곳을 알린다. 화면 아래 끝에 띠를 상주시키고, 모든 소프트웨어를 같은 부품으로 짜게 했다.
회색 면에 밝은 선과 어두운 선을 바깥쪽과 안쪽에 이중으로 겹친 입체 테두리 / 화면 아래 끝에 상주하는 띠와 그 왼쪽 끝에 놓인 네모난 버튼 / 짙은 남색 단색 제목 표시줄과 그 오른쪽 끝에 모인 작은 네모 세 개 / 안티에일리어싱이 없는 작은 비트맵 글자이며, 키보드에 배정된 한 글자에만 밑줄이 그어진다
483
ホロ / 2011–2014 / 양식 / 구글 UI
Google이 Android 3.0에서 도입하고 4.0에서는 탑재 자체를 기기의 호환성 요건으로까지 만든 설계 언어다. 검은 바탕에 가는 선을 긋고, 선택과 입력과 진행만을 하나의 청록색으로 빛나게 한다. 제조사가 자체 껍데기를 씌운 단말에서도 이 테마를 이름으로 지정한 앱은 손대지 않은 모습으로 표시된다는 약속과 함께 배포되었다.
검은 바탕에 흰 글자, 구분은 면이 아니라 1px 가는 선으로 한다 / 선택과 입력란의 밑줄과 진행 상황만 #33B5E5의 청록색으로 빛난다 / 화면 위쪽에 가로 한 줄의 액션 바, 아래쪽에 뒤로 가기와 홈과 최근 사용의 가상 키 띠 / 탭 제목과 목록의 소제목이 굵은 전체 대문자로 짜인다
484
モチーフ / 1989– / 양식 / 플랫폼 화면 언어
The Open Group이 유지하는 UNIX 워크스테이션용 화면 언어로, IEEE 1295로 규격화되어 200종이 넘는 기종에 실렸다. 공식 자료가 스스로 3D 베벨 외관이라고 부르는 그대로, 회색 면의 가장자리에 밝고 어두운 두 색을 두어 모든 부품을 밀어 올려 보여 준다.
회색 면의 위쪽과 왼쪽이 밝고 아래쪽과 오른쪽이 어두운 테두리여서 부품이 모두 떠 보인다 / 누르고 있는 동안에만 명암이 뒤바뀌어 부품이 가라앉아 보인다 / 입력을 받고 있는 부품의 바깥을 가는 사각 테두리가 빙 둘러싼다 / 스크롤 막대는 모서리가 각진 사각형이고 양 끝에 삼각형 화살표 버튼이 붙는다
485
オープンルック / 1988–1990s / 양식 / 플랫폼 화면 언어
Sun Microsystems가 규격서로 펴낸 UNIX 워크스테이션용 화면 언어다. 흑백 표시용 판과 입체 표시용 판을 동시에 정하고, 공통 요소는 모두 한 종류의 산세리프로 짜며, 색은 절제해서 쓴다고 정했다. 팝업 창의 왼쪽 어깨에는 압정이 있어서 꽂으면 창이 작업 면에 남는다.
팝업 창 머리말 왼쪽 끝에 있는 압정. 꽂은 창은 닫히지 않고 작업 면에 남는다 / 레이블 뒤에 이어지는 점 세 개는 다른 창을, 윤곽만 있는 삼각형은 메뉴를 예고한다 / 스크롤 막대는 엘리베이터와 케이블과 위아래 케이블 앵커로 나뉘고, 케이블의 짙은 부분이 보이는 비율을 나타낸다 / 작업 면은 50퍼센트, 메뉴의 그림자는 75퍼센트 망점으로 만들어진다
486
ネクストステップ・インターフェース / 1988–1997 / 양식 / 플랫폼 화면 언어
NeXT가 1993년 공식 지침서에서 정한 화면 언어다. 문서는 검정과 흰색과 회색만의 배색, 음영으로 입체감을 내는 간결한 외관을 목표로 내건다. 메뉴는 화면 왼쪽 위에 세로 기둥처럼 서고, 상주 앱의 상자는 오른쪽 끝에 세로로 늘어선다.
화면 왼쪽 위에 세로 한 줄로 서는 메뉴와, 그 오른쪽에 이어져 열리는 하위 메뉴 / 화면 오른쪽 끝에 세로로 늘어선 정사각형 앱 아이콘 / 색상이 없는 회색 계조만으로 깎아 낸 두꺼운 베벨 / 작업 중인 창의 제목 표시줄은 검게 칠하고, 그렇지 않고 앞에 있기만 한 창은 짙은 회색이 된다
487
アミガ・ワークベンチ / 1985–1996 / 양식 / 플랫폼 화면 언어
Commodore가 자사 스타일 가이드에서 규정한 Amiga의 화면 언어다. 초기에는 파란 바탕에 흰색과 주황을 더한 네 가지 색만으로 짜고, 각진 비트맵 서체 Topaz가 640×200 격자에 채워진다. 층을 이루는 것은 창이 아니라 화면 자체여서, 위쪽 막대를 끌어내리면 뒤의 화면이 나타난다.
파란 바탕에 흰색과 주황, 네 가지 색밖에 쓰지 않는 화면 / 각진 비트맵 서체가 640×200의 거친 격자에 채워진다 / 화면 위쪽 끝을 전체 너비의 제목 표시줄이 가로지르고, 오른쪽 끝에 앞뒤를 바꾸는 가젯이 늘어선다 / 사용 가능한 부품은 왼쪽 위 밝은 선과 오른쪽 아래 어두운 선으로 떠오르고, 누르면 명암이 뒤집혀 가라앉는다
488
BeOS インターフェース / 1995–2001 / 양식 / 플랫폼 화면 언어
창의 위쪽 변을 차지하던 제목 표시줄을 버리고 제목의 너비만 한 노란 탭만 올린 Be 사의 화면 언어다. 공식 안내서가 Be 창만의 기능이라고 부르는 그대로, Shift를 누른 채 탭을 옆으로 미끄러뜨릴 수 있어서 창을 겹쳐도 탭만 가로로 나란히 남는다.
맨 앞 창의 탭만 노랗고 다른 창의 탭은 회색 그대로다 / 탭은 창의 너비 전체가 아니라 제목의 길이만큼만 된다 / Shift를 누른 채 탭을 잡으면 탭이 창의 위쪽 변을 좌우로 미끄러진다 / 화면 오른쪽 위 모서리에 Deskbar가 서고, 실행 중인 앱이 세로로 쌓인다
489
アドワイタ / 2011– / 양식 / 플랫폼 화면 언어
GNOME이 자신의 기본 모습에 붙인 이름이며, 지침서는 밝은 판과 어두운 판과 고대비 판을 같은 부품으로 성립시킨다고 정한다. 창의 위쪽 끝을 헤더 바가 한 줄 가로지르고, 거기 놓이는 버튼은 배경도 테두리도 그리지 않는다. 아이콘은 16x16px 단색 심볼릭으로 통일된다.
창의 위쪽 끝을 가로지르는 헤더 바 한 줄. 왼쪽과 가운데와 오른쪽 세 지점에 붙이고, 가운데에 창의 제목이 앉는다 / 헤더 바의 버튼은 배경도 테두리도 없고, 기호와 글자만 면 위에 뜬다 / 16x16px로 그린 단색 심볼릭 아이콘. 주요 선은 2px 굵기이고 원근을 주지 않은 정면 형태다 / Blue 3의 #3584e4를 포함해 색상마다 다섯 단계를 갖춘 공개 팔레트
490
メタル（Java ルック＆フィール） / 1998– / 양식 / 플랫폼 화면 언어
Sun이 Swing의 기본 외관으로 만든 설계 언어로, 어떤 운영체제 위에서도 프로그램이 똑같이 보이도록 하는 것을 노렸다. Metal은 Sun 내부의 프로젝트 이름이 그대로 공식 명칭이 된 것이다. 푸른 보라의 면과 1픽셀의 곧은 테두리를 지니며, 바탕이 되는 플랫폼의 양식을 전혀 물려받지 않는다.
옅은 푸른 보라 바탕 위에 짙은 푸른 보라 띠로 놓인 내부 창의 제목 표시줄 / 제목 표시줄과 구분선에 새겨진 잔 점과 빗금의 질감 / 모서리를 굴리지 않은 사각형 버튼과 그 둘레를 두른 1픽셀의 짙은 푸른 보라 선 / 바깥 창틀은 운영체제가 그리는데 그 안쪽만 다른 양식으로 그려진 이중 구조
491
ワンUI / 2018– / 양식 / 플랫폼 화면 언어
삼성이 Galaxy를 위해 정한 설계 언어다. 엄지가 가장 쉽게 닿는 높이에서 화면을 갈라 위쪽을 보기만 하는 영역, 아래쪽을 만지는 영역으로 삼고, 제목은 위에 두고 버튼과 탭과 대화 상자는 아래로 모은다. 내용은 모서리를 크게 굴린 상자에 담고, 바탕은 흰색 아니면 순수한 검정, 강조는 파랑 하나로 좁힌다.
화면 위쪽은 제목과 여백만으로 채워지고 만질 수 있는 부품이 하나도 놓이지 않는다 / 모서리를 크게 굴린 카드 모양 상자에 글과 이미지가 한 덩어리씩 담긴다 / 위쪽 제목은 펼친 상태와 접힌 상태 둘만 가지며 중간 높이에서 멈추지 않는다 / 어두운 주제에서는 바탕이 순수한 검정이 되고 그 위에 파란 강조만 얹힌다
492
クロスメディアバー / 2003–2013 / 레이아웃 / 플랫폼 화면 언어
소니가 XMB라는 이름으로 상표에 올린, 가정용 게임기와 텔레비전의 화면 언어다. 공식 설명서가 말하는 대로 가로 한 줄은 기능의 분류를, 세로 한 줄은 그 분류에서 할 수 있는 일을 늘어놓고, 두 줄이 만나는 한 점만 금색으로 켜져 현재 위치를 알린다. 나머지는 어두운 바탕 위에서 옅은 파랑인 채로 잠들어 있다.
화면의 조금 왼쪽에서 가로줄과 세로줄이 만나고 그 교차점의 항목만 금색으로 빛난다 / 이름이 글자로 나오는 것은 선택된 항목뿐이고 나머지는 아이콘만 늘어선다 / 바탕은 검정에 가까운 짙은 남색 하나이고 아이콘은 채운 면이 아니라 옅은 파랑의 가는 선이다 / 십자키의 좌우로 분류가, 상하로 항목이 바뀌지만 움직이는 것은 줄이고 교차점은 그대로 있다
493
マジックキャップ / 1994–1998 / 세계관 / 플랫폼 화면 언어
General Magic이 휴대용 통신 단말기에 얹은 화면 언어다. 사물을 닮게 하는 대신 장소를 닮게 하여, 책상 위의 전화기와 회전식 명함첩과 메모장에서 시작해 복도를 지나 게임 방이나 창고로 들어간다. 만질 수 있는 대상이 모두 그림으로 그려져 있고, 설명서를 읽지 않고 쓰기 시작한 사람이 많았다고 기록되어 있다.
책상 위에 전화기와 회전식 명함첩과 메모장과 달력이 놓인 첫 화면 / 책상 뒤의 벽에 걸린 시계와 서류 수발 상자와 서류장이 그려져 있다 / 방에서 방으로는 복도를 지나가고, 그 복도에도 그림과 가구가 그려져 있다 / 계조가 거친 화면에 그려진 선화를 손가락이 아니라 펜으로 직접 찍는다
494
.png)
GOV.UK デザインシステム / 2012– / 양식 / 플랫폼 화면 언어
영국 정부의 Government Digital Service가 공공 서비스를 위해 공개하고 유지하는 설계 언어다. 모든 것을 장식 없는 왼쪽 정렬 한 단으로 GDS Transport에 짜고, 모서리를 굴리지 않은 초록 버튼은 아래 변의 짙은 초록 띠로 두께를 얻어 누르면 그만큼 가라앉는다. 키보드 초점이 놓인 요소는 노란 바탕과 검은 밑줄로 나타낸다.
장식이 없는 한 단의 왼쪽 정렬이고 테두리도 그림자도 거의 쓰지 않는다 / 모서리를 굴리지 않은 초록 버튼의 아래 변에 짙은 초록 띠가 깔리고 누르면 그 두께만큼 가라앉는다 / 초점이 놓인 요소만 노란 바탕으로 바뀌고 그 아래에 검은 선이 그어진다 / 글자 크기는 48, 36, 24, 19, 16px이라는 성긴 단계만 있고 중간 크기가 없다
495
スクロールテリング / 2012– / 레이아웃 / 웹에서 읽는 것
읽는 위치를 넘기는 동작 자체를 이야기의 진행에 할당한 웹 지면이다. 도판과 지도와 영상이 넘김에 따라 바뀌고 위로 되돌리면 같은 순서로 되돌아온다. 연구 쪽에서는 장문 보도의 웹판으로 정리되었고, 줄거리는 외길이거나 원하는 사람만 깊이 잠길 수 있는 신축식으로 나뉜다.
도판은 화면에 머문 채 본문만 좁은 한 단으로 지나간다 / 도판의 전환은 불투명도의 변화와 지도의 이동으로 이루어지고 거꾸로 넘기면 원래대로 돌아온다 / 사진과 영상과 데이터 도판 세 가지가 같은 기사 안에 섞여 있다 / 줄거리는 외길이거나 도중에 깊이 파는 곁길로 갈라졌다가 돌아오거나 둘 중 하나다
496
インフィニット・キャンバス / 2000– / 레이아웃 / 웹에서 읽는 것
Scott McCloud가 2000년 『Reinventing Comics』에서 이름 붙인 웹 만화의 지면이다. 화면을 페이지가 아니라 창으로 보고, 끝없이 뻗는 한 장의 면 위에 칸을 놓는다. 공간으로 시간을 재는 매체이므로 칸의 간격이 그대로 이야기의 속도가 된다.
종이 판형에 담기지 않는 세로로 길거나 가로로 긴 면에 페이지의 끊김이 한 군데도 없다 / 칸의 간격이 벌어지는 곳에서 이야기가 느려지고 좁아지는 곳에서 빨라진다 / 계단처럼 떨어지거나 나선으로 감기는 칸의 행렬처럼 페이지 안에서는 성립하지 않는 배열 / 한 칸의 크기가 옆 칸의 수십 배가 되는, 판형에 매이지 않은 진폭
497
ウェブトゥーン（縦スクロール漫画） / 2003– / 레이아웃 / 웹에서 읽는 것
한국의 포털에서 자란, 세로 한 줄로만 흐르는 만화의 지면이다. 칸 사이의 여백 자체가 표현이 되어 그 길이가 흘러간 시간이나 장면의 전환을 가리키고, 배경색과 내리는 비, 칸에서 꺼낸 대사까지 떠맡는다. 독자는 앞을 미리 볼 수 없고 스크롤한 만큼만 시간이 나아간다.
칸이 세로 한 줄로만 늘어서고 눈을 옆으로 옮길 곳이 없다 / 칸 사이의 여백이 칸보다 길게 잡히고 거기에 배경색과 내리는 비와 대사가 놓인다 / 너비의 여덟 배쯤 세로로 긴 한 칸이 나타나 여러 번 스크롤해야 전체가 보인다 / 처음부터 끝까지 전면 컬러이고 화면 너비에 맞춘 일정한 가로폭으로 그려진다
498
エクスプローラブル・エクスプラネーション / 2011– / 기법 / 웹에서 읽는 것
Bret Victor가 2011년 3월 같은 제목의 글에서 이름 붙인, 읽을거리 안에 돌아가는 모형을 심는 글쓰기다. 본문의 수치에 점선 밑줄이 그어져 있고 붙잡아 움직이면 이어지는 문장과 곁의 그림이 동시에 다시 쓰인다. 주장의 근거를 독자가 스스로 흔들어 확인할 수 있다.
본문 속 수치에 점선 밑줄이 그어져 있고 손을 대면 파랗게 바뀐다 / 그 수치를 좌우로 움직이면 뒤따르는 문장과 곁의 그림이 동시에 다시 쓰인다 / 그림이 별도의 실험 상자에 갇히지 않고 단락과 단락 사이에 이어져 놓인다 / 아무것도 건드리지 않아도 그림이 뜻을 이루어 초깃값 그대로 읽어 나갈 수 있다
499
架空ユーザーインターフェース / 1997– / 양식 / UI 스타일
영화 속에 나오는 화면을 만드는 일에 붙은 이름이다. Mark Coleran의 작업을 중심으로 퍼졌지만 정작 본인은 이 말의 공을 자신이 가져도 되는지 확신하지 못한다고 말한다. 그는 이 화면들을 삽화이자 이야기를 위한 장치라고 설명하며 애초에 조작하라고 만든 것이 아니라고 본다. 빛과 형태와 부피, 움직임과 소리만으로 작업해서 영화에 나오는 화면마다 관객이 읽어야 할 지점을 하나만 남긴다.
화면 한 장에 관객이 읽어야 할 것은 하나뿐이고 나머지는 모두 밀도로만 놓인다 / 고정폭 숫자가 늘어선 칸이 끊임없이 갱신되지만 실제로는 아무것도 계산하지 않는다 / 검은 바탕에 가느다란 발광 선이 놓이고 도형은 윤곽으로만 그려져 채움이 거의 없다 / 순수한 추상 도형이 아니라 실제로 있을 법한 장비의 테두리와 조작부처럼 보인다
500
ダイエジェティックUI / 2009– / 기법 / UI 스타일
게임의 정보 표시를 허구 세계 안에 있는가와 3차원 공간 안에 있는가라는 두 축으로 다시 놓았을 때 둘 다 만족하는 칸에 붙은 이름이다. 2009년 Chalmers University of Technology의 석사 논문이 EA DICE와 함께 게임 화면을 이 두 축 위에 정리하고 이 말을 그 칸에만 남겼다. 체력이 주인공의 장비 자체에서 빛나는 설계가 대표적인 예다.
체력이나 탄약이 화면 구석이 아니라 주인공의 장비 자체에 표시된다 / 지도가 일시정지 화면이 아니라 주인공이 손에 들고 걸으면서 보는 도구로 나온다 / 정보 패널이 공중에 투영되고 공간을 차지하므로 시점을 움직이면 함께 기울어진다 / 행선지 안내가 세계 안에 서 있는 표지판의 색으로 놓인다
501
1ビットアイコン / 1982–1990s / 기법 / UI 스타일
Susan Kare가 Macintosh를 위해 확립한, 흑과 백 두 값만으로 그리는 아이콘 작법이다. 모눈종이의 한 칸을 한 픽셀로 삼아 밑그림을 잡았고, 가위가 잘라내기를 휴지통이 지우기를 뜻하도록 명령을 일상의 물건으로 바꿔 말해서 어느 나라에서도 설명 없이 읽히게 했다. 그 원화첩은 지금 미술관 소장품이 되어 있다.
흑과 백 두 값만 쓰고 회색은 바둑판처럼 솎아 낸 점의 집합으로 대신한다 / 윤곽이 1픽셀 선으로 닫히고 안쪽은 채우거나 망점을 까는 두 가지뿐이며 음영은 없다 / 가위나 휴지통, 서류처럼 흔한 물건의 윤곽이 그대로 조작의 이름이 된다 / 모눈 한 칸에 점을 하나씩 찍은 흔적이 남아 사선이 계단으로 꺾인다
502
ハイパーカードのスタック / 1987–2004 / 레이아웃 / 디지털 레트로
아마추어가 만들어 돌린 흑백 이진 화면 묶음이다. 쪽이 아니라 한 장의 카드가 화면을 차지하고, 그림과 글자가 같은 면에 붙으며, 아래쪽에 늘어선 작은 아이콘 단추로 다른 카드나 다른 묶음으로 건너뛴다.
한 장의 카드가 화면을 차지하고, 쪽을 넘기는 동작이 없다 / 흰 바탕에 검정의 이진 그림이며, 회색도 사진도 망점으로 풀린다 / 카드 아래쪽에 작은 정사각형 아이콘 단추가 한 줄로 붙어 있다 / 그림과 글자가 같은 면에 함께 있고, 입력란은 밑줄 하나로만 표시된다
503
Winampスキン / 1997–2005 / 양식 / 디지털 레트로
아마추어가 그려서 돌린 재생기의 얼굴이다. 직사각형 창틀을 버리고 거치형 오디오 기기의 전면 패널을 흉내 내며, 숫자도 글자도 서체가 아니라 비트맵 그림으로 한 장의 이미지에 나란히 그려 넣는다.
직사각형 창틀을 버리고 거치형 기기의 전면 패널을 본뜬 외형이다 / 숫자와 알파벳이 등폭의 아주 작은 비트맵으로 한 장의 이미지에 늘어선다 / 금속의 반사도 액정의 발광도 계조가 아니라 점을 찍어 나누는 방식으로 만들어진다 / 본체와 이퀄라이저와 재생 목록 세 장이 달라붙어 세로로 한 대의 기기처럼 보인다
504
ミニテルのサービス画面 / 1980–2012 / 레이아웃 / 디지털 레트로
칸으로 이루어진 단말에 올리기 위해 만든, 한 화면 안에서 끝나는 서비스의 쪽이다. 위쪽에 서비스의 이름을 놓고, 번호를 눌러 고르는 항목을 세로로 늘어놓으며, 제목과 그림은 칸을 나눈 거친 블록으로 짠다.
위쪽에 서비스 이름의 띠가 있고, 그 아래에 번호를 매긴 항목이 세로 한 줄로 늘어선다 / 제목과 그림이 한 칸을 세로 셋 가로 둘로 나눈 블록의 덩어리로 만들어진다 / 진한 여덟 색으로만 칠해지고 중간색도 계조도 나오지 않는다 / 입력하는 자리가 반전 표시의 띠로 나타나고, 강조는 반전과 밑줄뿐이다
IndexStyle은 디자인 주변의 모든 용어를 싣지 않습니다. 독립 항목은 알아볼 수 있고 재현할 수 있으며 이웃 양식과 구별되는 시각 언어여야 합니다. 수록 기준