링크드 데이터(Linked Data)

링크드 데이터 표지

  • 도서명: 링크드 데이터(Linked Data)
  • 저자: David Wood, Marsha Zaidman, Luke Ruth, Michael Hausenblas
  • 역자: 오원석, 이명진, 박진호, 김보람
  • 펴낸곳: 공존의 미학
  • 초판발행: 2017년 3월
  • ISBN: 979-11-950726-4-4
  • 출판지원: (주)밸류어블디자인랩

웹사이트의 불편한 진실 에필로그

(source) 웹사이트 평가의 불편한 진실

마치면서

지금까지 평가 항목에 관한 이슈와 문제점을 살펴보았다. 실제로는 언급할 가치가 없는 평가 항목도 많았다. 웹사이트에 대해서 객관적으로 평가할 수 있는 부분은 10%가 될까 말까 할 거다. 그런데 억지로 웹사이트 전체를 평가하다 보니 오류와 부실투성이 웹사이트 평가가 돼 버렸다.

앞에서 살펴본 이슈와 문제점을 종합해 보면 크게 네 가지로 정리할 수 있다. 만드는 사람의 의도를 파악하지 않고 겉만 보고 평가하는 것, 사람마다 다르게 판단할 수 있는 주관적 요소를 함부로 평가하는 것, 특정 웹사이트에 대해서만 적용될 수 있는 평가 항목을 모든 웹사이트에 적용하여 평가하는 것, 웹사이트 구성 요소 사이의 복합적인 상호 관계를 고려하지 않고 단편적으로 평가하는 것이다.

객관적으로 평가할 수 있는 대상 위주로 평가 범위를 제한하고, 숨은 의도와 다양한 요인을 고려하여 꼼꼼하고 성의 있게 평가한다면 웹사이트 평가의 질은 크게 나아질 수 있다. 그렇다고 해도 순위나 등급을 매기는 웹사이트 평가는 있을 수 없다. 사람이 저마다 다른 것처럼 웹사이트도 저마다 다르고, 같은 기준으로 사람을 평가할 수 없듯이 웹사이트도 평가할 수 없기 때문이다.

순위나 등급을 매기는 웹사이트 평가는 돈 되는 비즈니스다. 이것이 ‘웹사이트 평가의 불편한 진실’이다. 자본주의 사회라도 돈으로 살 수 없는 순수 영역이 엄연히 존재한다. 그중 하나가 바로 ‘상’이다. 돈으로 사고파는 상이 마치 공정하고 투명한 절차에 따라 주고받는 것처럼 포장하는 것은 일종의 사기다. 이 책에서 평가 항목이 얼마나 말도 안 되는지 반론을 제기했으므로 다음 차례는 공공이든 민간이든 간에 웹사이트 평가가 공정하고 투명한 절차에 따라 진행되는지를 따졌으면 한다. 그리고 그다음에는 웹사이트 평가 주체의 회계장부를 들여다봤으면 한다.

시험이 어려워 지면 참고서가 많이 팔린다. 웹사이트 평가도 마찬가지다. 그래서인지 말도 안 되는 평가 항목이 해마다 늘어나더니, 이제는 “현실 세계를 그대로 반영해야 한다”, “화면 요소를 몇 %로 제한해야 한다”식의 황당한 평가 항목까지 등장하게 되었다. 이런 평가 항목으로 어떻게 평가했는지 정말 궁금하다. 그래서 웹사이트 평가 결과는 낱낱이 공개해야 하며, 이의 제기에 성실하게 답변해야 한다. 평가 결과를 있는 그대로 공개하지 않는 것은 구린 구석이 있다고 볼 수밖에 없으며, 이의 제기에 대해서 당당하게 응하지 않는다면 웹사이트 평가의 저의를 의심할 수밖에 없다.

같은 기준으로 서로 다른 웹사이트를 평가할 수 없다는 사실은 평가자도 알고 있다. 그럼에도 웹사이트 평가에 참여하는 것은 그럴 만한 이유가 있을 거라고 본다. 사회적 책임이나 전문직 명예라는 명분이 가장 큰 이유일 테지만, 자의반 타의 반 비즈니스라는 이유도 한몫을 하고 있다. 전문 분야는 좁아서 평가자와 피평가자의 관계도 그만큼 가까울 수 있다. 피평가자가 평가자를 알고 있다면 계획적으로 비즈니스 관계를 만들어서 좋은 평가를 받으려는 편법이 판칠 수 있다. 그래서 피평가자는 평가자를 알 수 없어야 하지만, 실제로는 이름, 사진, 소속까지 자랑스럽게 공개하고 있다.

수많은 사람이 이용하는 웹사이트를 만든다는 것은 절대 쉬운 일이 아니다. 그저 노력만으로 그저 감각만으로 좋은 웹사이트를 만들 수 없다. 인문과 기술 영역을 넘나들며 폭넓고 깊이 있는 지식과 경험이 뒷받침되어야 한다. 그런 다음 더 나은 웹사이트를 만들기 위한 노력과 진심을 담아야 한다. 이렇게 만든 만든 웹사이트는 이 세상 누구도 함부로 평가할 수 없을 것이다.

물론 세상일이 지식과 경험, 노력과 진심만으로 돌아가는 것은 아니다. 수상 조건을 공공연하게 제안요청서에서 강요하는 환경에서는 돈을 주고 상을 받는 관습과 관행은 사라지지 않는다. 적어도 상업적인 웹사이트 평가에서 받은 수상 경력을 인정하지 않아야 한다. 오히려 쓸데없이 시간과 비용을 낭비했다고 질책해야 한다. 지금까지 주고받은 상. 다 의미 없는 것이다. 뭔가 과시하고 싶다면 그대로 두고, 그렇지 않다면 쓰레기통에 버려도 된다.

돈이면 다 되는 세상에 살고 있다 보니, 이 책을 읽고 나서도 “뭐 그럴 수도 있는 것 아닌가”라는 반응도 있을 것 같다. 이미 비상식의 시대에 살고 있어서 그깟 객관성이 어떻고 일관성이 어떻고 하는 얘기는 이슈조차 되지 않을 수 있다. 그래도 잘못된 것은 잘못되었다고 말하고 싶었다.

이 책의 내용에 대해서 웹사이트 평가에 종사하거나 참여하는 사람이 어떤 생각을 할지 궁금하다. 아마 이런저런 변명·해명과 함께 필자의 의견과 주장에 대해서 오류를 지적하고 반론을 내고 싶을 것이다. 만약 필자가 어떤 지적도 반론도 받아들이지 않는다면 어떤 심정일까? 억울하고 답답할 것이다. 이런 심정을 피평가자가 갖고 있다는 사실을 알아 두었으면 좋겠다.

인터뷰를 하면서 건전한 웹사이트 평가(‘모바일앱 어워드’)도 있다는 것을 알았다. 지금은 소정의 등록심사비가 있지만, 처음에는 어떤 비용도 없이 출품하고 수상자에게는 오히려 상금을 줬다고 한다. 물론 이 평가 역시 서열과 등급, 획일성과 객관성 이슈에서 벗어날 수 없다는 문제를 안고 있지만, 상업성을 스스로 조절했다는 점에서 칭찬하고 싶다.

누구나 부족하다고 생각한다. 완벽한 사람이 얼마나 있겠는가? 부족하면 채우면 된다고 생각한다. 스스로 지난날을 돌이켜 보면 너무 부족한 능력 탓에 쥐구멍에 숨고 싶을 정도로 부끄러웠던 적이 한두 번이 아니다. 부끄러움을 알면 달라지고 나아지지 않겠는가? 웹사이트 평가도 달라지고 나아지기를 바란다.

웹 표준 (Web Standards)

(source) 웹의 기본 Basics of the Web

웹 표준(Web Standards)은“ 월드 와이드 웹 컨소시엄(W3C)1에서 제시한 표준기술을 지키자”는 기술 가이드(technical guidance)이자 실천 캠페인(practical campaign)이다. 웹의 창시자인 팀 버너스리(Tim Berners-Lee)가 꿈꾸던 웹은 사람들이 함께 일하고 즐기고 교류하기 위해 정보를 서로 나누는 모든 사람의 공간(common space)이었다. 웹은 누구도 상상하지 못할 정도로 폭발적으로 성장해 왔다. 이러한 성장은 정부나 기관이 주도한 것이 아니라 오로지 필요에 의해 이루어졌기 때문에 자유롭고 개방적이다. 그래서 웹은 더 빨리 확산될 수 있었고 더 다양하게 응용할 수 있었다. 한편으로는 그늘도 있었다. 웹이 상용적으로 발전하면서 웹을 이용하기 위한 필수 도구인 브라우저도 상용적으로 발전하게 되었다.

표준기술에 충실한 브라우저보다는 기업 표준에 충실한 브라우저가 시장 논리에 따라 시장을 지배하면서 크고 작은 문제들이 생겨나기 시작하였다. 기업 표준에 충실했던 브라우저는 표준기술에 따라 만든 HTML 문서를 올바르게 처리하지 못했기 때문에 하나의 HTML 문서가 브라우저마다 서로 다르게 처리되는 문제가 발생하였다. 이런 문제 탓에 개발자들은 여러 버전의 HTML 문서를 만들어 브라우저 차이를 극복하거나 표준기술과 상관없이 시장 점유율이 높은 브라우저만을 위한 HTML 문서를 만들기 시작했다.

전자는 비효율적 개발이었고 후자는 비표준적 개발이었다. 대부분의 개발은 후자를 따랐다. 이러한 상황이 널리 퍼지면서 웹이 지니고 있는 보편적 가치가 점점 퇴색되었고 보편적 가치를 지녀야 할 웹이 오히려 특정 기기, 특정 운영체제, 특정 브라우저에 종속되는 문제가 생기게 되었다. 이런 문제를 극복하고자 웹 표준이 등장하였다. 웹 표준은 말 그대로 “웹을 위한 표준” , 즉“ 월드 와이드 웹에서 제시한 표준기술”을 지키는 것이다. 이표준기술은 웹을 효율/효과적으로 만들고 이용할 수 있도록 콘텐츠의 구조/표현/동작을 위한 기술로 구분되어 있다(아래 표 참조). 표준기술은 보편적 가치를 추구하는 열린 표준(Open Standard)이므로 브라우저 벤더(Web browser vendor)1,웹 개발자(Web developer), 저작자(Web author, content provider), 기관 및 기업 등 웹에 참여하는 모든 구성원이 지켜야 하는 표준이다.

모든 구성원이 표준기술을 따른다면 웹은 기기, 운영체제, 브라우저에 얽매이지 않고 표준화된 콘텐츠를 자유롭게 만들고 이용할 수 있는 환경이 될 수 있다. 이렇게 되면 팀 버너스리가 바라던“ 모든 사람의 정보 공간”(Common Information Space)이 실현될 수 있으며, 이것이 웹 표준을 추구해야 할 이유다.

웹 표준

경험(Experience)

Source. UX Design

경험은 일상에서 자주 사용하는 말이지만, 막상 무슨 의미일까 생각해보면 참으로 모호하고 어렵다는 생각이 든다. 실제로 경험은 추상적이고 철학적인 개념이다. 경험의 사전적 의미는‘실제로 보고 듣고겪는 일’ 또는‘인간이 감각이나 내성을 통해서 얻는 것 및 그것을 획득하는 과정’이다. 전자의 의미에서 경험은

  • 대상과의 직접적인 접촉을 필요로 하며,
  • 허구가 아닌 사실에 의거하여 형성된다는 점을 알 수 있다.

후자의 의미에서 경험은

  • 지각과 인지 과정(perception & cognition)을 통해 얻어지는 결과적 측면을포함하며,
  • 경험을 형성하는 과정 그 자체도 의미가 있다는 사실을 알 수 있다.

‘경험은 대상과의 직접적인 접촉을 필요로 한다’라는 점에서 경험은 저절로 또는 스스로 생기는 것이 아니라 대상이 있어야만 생긴다는 것을 알 수 있다. 그런데 대상의 존재만으로 경험이 생기는 것은 아니다. 대상과 사람이 직접 맞닿지 않으면 경험은 생기지 않는다. 맞닿기 위해서 사람이 대상에 대해 관심을 갖거나 또는 대상을 필요로 해야 하며, 대상은 사람의 관심을 끌 수 있는 자극 요소와 필요에 부응할 수 있는 내용 요소를 갖고 있어야 한다. 대상이 갖고 있는 자극과 내용요소에 끌려 사람은 대상과의 관계를 맺는다. 이 관계는 직접적이다. 그래서 직접 보지 않고, 직접 느끼지 않고, 직접 겪지 않는다면 경험은 생기지 않는다.

‘경험은 허구가 아닌 사실에 의거하여 형성된다’는 점에서 다른 사람의 경험이 자신의 경험이 될 수 없다는 것을 알 수 있다. 경험은 대체될 수 없고 본인이 아니면 알 수 없는 아주 개인적인 영역이다. 만약 사실이 아닌 것에 의해 경험이 형성되고, 다른 사람의 경험이 내 경험이 된다면 우리가 사는 세상은 아주 혼란스러워질 것이다. 경험이 사실에 의해 형성되지만, 그렇다고 사실이 곧 경험이 되는 것은 아닐 것이다. 어떤 사실은 고유의 배경을 가진 개인의 지각과 인지 과정을 거쳐 유일무이한 경험(unique experience)으로 발전하게 된다. 사실은 객관적인 것이고 경험은 주관적인 것이다. 사실과 경험 사이에 사람이 매개되어 있다. 이것은 경험 형성에 영향을 주는 가장 중요한 요인이 바로 사람이라는 점을 일러준다.

‘경험은 지각과 인지 과정을 통해 얻어지는 결과적 측면을 포함한다’는 점에서 경험은 스스로 받아들이거나 깨닫지 않으면 얻을 수 없다는 사실을 알 수 있다. 제 아무리 자극이 강하더라도 이를 수용하지않으면 그만이다. 대상을 통해 어떤 결과를 얻으려는 능동적인 태도가 있어야만 자극을 받아들이고 이를 처리하는 과정이 발생한다. 그리고 이러한 부분적 과정이 전체적으로 구성되어야만 하나의 경험을 형성한다. 숲길을 거니는 것, 음식을 먹는 것, 친구와 대화하는 것, 라디오를 듣는 것. 이런 일들은 반드시 의지, 시간, 노력을 필요로 하며, 사람에게 느낌, 지식, 기억을 남긴다. 이처럼 대상과 사람이 서로 관계를 맺게 되면 남다른 일(personal event)이 발생하며, 그 일로 인한 결과, 즉 경험이 형성된다.

‘경험은 경험을 형성하는 과정 그 자체도 의미가 있다’는 점에서 경험은 결과뿐만 아니라 과정도 중요하다는 사실을 알 수 있다. 전통적인 제품은 결과 지향적이지만 인터랙티브 제품은 과정 지향적이다. 그래서 인적 서비스에 비유되기도 한다. 제 아무리 맛있는 음식을 내더라도 서비스가 불친절하면 그 식당에 대한 경험은 부정적이다. 이런 법칙은 인터랙티브 제품에 그대로 적용된다. 즉, 결과가 긍정적이더라도 과정이 부정적이면 전체적인 만족도는 부정적으로 나타난다.
그 만큼 결과를 내기 위한 과정이 중요하므로 인터랙티브 제품에 대한 만족도는 과정 지향적으로 바뀌어야 한다.

사용자 경험(User Experience)

Source. UX Design

경험은 저절로 생기는 것이 아니라 어떤 대상과의 상호작용에 의해 생기며, 이 대상의 범위는 넓고 다양하다. 우리의 일상은 수 많은 대상과 맞닿아 있다. 만나는 여러 사람들, 현재 살고 있는 지역 사회와 집, 여러 가지 기계와 그것을 사용하기 위한 방법, 수 많은 인적·물적 서비스, 회사에서 일하는 방법 및 절차, 컴퓨터나 휴대폰에서 읽는 콘텐츠 등 우리 일상은 경험의 연속이다. 이 중 제품과 의 상호작용을 통해 얻게 된 경험을‘사용자 경험’이라고 부른다. 따라서 사용자 경험은 제품을 사용하면서 내재화되는 모든 것을 의미하며, 여기에는 경험을 비롯하여 느낌, 기억, 만족감 등도 포함된다.

사용자 경험에 대한 기준은 절대적이고 일반적인 것이 아니라 상대적이며 개인적인 것이다. 즉, 단순히‘좋은 것’이 아니라‘어느 개인에게 특별히 더 좋은 것’. 이 점이 중요하다. 다른 사람에게 좋은 경험을 주는 제품이 내게도 좋은 경험을 주는 것은 아니며, 좋은 경험에 대한 판단은 제품이 아니라 사용자가 내리는 것이다. 제 아무리 좋은 제품이더라도 사용자가 아니라면 아닌 것이다. 그만큼 경험은 개인적인 영역이다. 사물이나 환경은 보편적이지만, 이와 상호작용하는 사람은 제각각 다른 신념, 가치관, 지식 수준을 갖고 있다. 이러한 개인적 배경으로 인해 같은 제품을 사용하더라도 경험은 사람마다 다르게 형성된다. 여기에서 사용자 경험은 고유하고 독자적이며, 똑 같은 사용자 경험은 어디에도 존재하지 않는다는 사실을 알 수 있다. 사용자 경험을 다루고자 한다면 사용자의 개인적인 영역으로 들어가야 한다. 개개인의 요구, 필요 그리고 사고 및 행동 양식을 알지 못하면 좋은 사용자 경험을 제공할 수 없다.

‘좋은 사용자 경험’(good user experience)은 긍정적이고(positive), 풍부하며(rich), 의미 있어야 한다(meaningful). 어렵고 힘든 것은 피하려는 것이 본능이다. 이것을 받아들이게 하려면 상호작용이 올바른 방향으로 진행되거나 즐거운 과정이 될 수 있도록 긍정적인 경험(positive experience)을 제공해야 한다. 이를 위해서는 사용자 과업에 최적화된 제품이 필요하다. 주고 받는 것이 없으면 경험이 생길 수 없다. 상호작용이 원활하게 이루어질 수 있도록 풍부한 경험(rich experience)을 제공할 수 있어야 한다. 이를 위해서는 선택의 폭이 넓고 능동적인 참여를 이끌 수 있는 제품이 필요하다. 요구와 상관 없는 결과는 소용없다. 의미 있는 경험meaningful experience)을 제공할 수 있도록 사용자 가치에 초점을 두어야 한다. 이를 위해서는 사용자의 요구와 필요를 충분히 반영해야 한다.

사용자 경험 디자인 (User Experience Design)

Source. UX Design

살펴본 바와 같이, 경험은 다양한 대상으로부터 얻게 되며, 보다 나은 경험을 얻도록 경험 요소를 계획하고 구성하는 일련의 활동을‘경험 디자인’(experience design)이라고 한다. 이 중 제품과 관련된 활동을‘사용자 경험 디자인’(user experience design)이라고 부른다. 따라서 사용자 경험 디자인은 경험 디자인의 하위 개념으로써 사용자가 제품을 통해 좋은 경험(good experience)을 얻도록 디자인 요소를 계획하고 구성하는 일련의 활동 또는 방법이라고 볼 수 있다. 여기에서 ‘제품’(product)은‘사용’(use)의 개념을 갖고 있는 소프트웨어, 웹 사이트, 기계, 시스템, 컴퓨터 등을 포함한 인터랙티브 제품(interactive product)을 의미한다.

인터랙티브 제품은 과정 지향적이어야 한다. 이것은 디자인 영역에서 해결할 수 있다. 비즈니스 차원에서 무엇what을 제공할 것인지를 결정한다면, 디자인 차원에서는 어떻게how 제공할 것인지를 결정한다. 같은 내용이더라도 좋은 디자인에 의해 전달되면 더 나은 효과를 기대할 수 있다. 사실 사용자와 제품 사이의 상호작용은 대부분 셀프서비스에 의해 진행된다. 셀프서비스는 사용자의 노력과 시간을 필요로 한다. 상호작용의 과정이 즐거우면 셀프서비스는 즐거운 경험이라고 생각하지만, 그 반대라면 셀프서비스는 일방적인 희생일 뿐이다. 그 만큼 경험에 있어 과정이 중요하다. 이러한 과정을 주먹구구식으로
디자인한다면 결코 좋은 제품을 만들 수 없다. 이것이 바로 사용자 경험 디자인을 필요로 하는 이유다.

사용자 경험 디자인은 단순히 제품의 품질 수준을 평가하기 위한 척도가 아니라 좋은 제품을 만들기 위한 방법이자 활동이다. 여기에는 사용자 경험을 향상시킬 수 있는 철학, 이론, 절차, 지침 그리고 지혜를 담고 있다. 그래서 사용자 경험 디자인에 의해 만들어진 제품은 뭐가 달라도 다르다. 문제는 실행이다. 사용자 경험 디자인은 기존의 디자인 방법론보다 더 넓은 영역을 커버해야 하고 더 깊은 지점까지 파악해야 하는 어려움이 있다. 특히, 사용자가 제품을 통해 얻는 경험은 총체적이기 때문에 제품의 전반적인품질 수준을 높이려는 노력이 필요하다. 이를 위해서는 다양한 분야의 이론적·실무적 배경이 필요하다(interdisciplinary & multidisciplinary). 우선 사람에 대한 깊은 이해가 필요하지만, 그 밖에도 사람과 맞닿아 있는 대상도 이해해야 한다. 거의 모든 분야를 섭렵해야 하며, 동원되는 기법도 매우 다양하다. 그래서 사용자 경험 디자인은 혼자 수행하기 어려운 분야이며, 다양한 배경을 가진 사람들이 서로 어우러져야만 좋은 결과를 얻을 수 있다. 관건은 균형과 통합이다. 우선 균형을 맞추는 것이 중요하다. 사용자 경험 디자인 조직을 구성하는 데 있어, 소프트웨어 개발 업체는 기술과 설계, 서비스 제공 업체는 조사와 기획, SI나 디자인 개발 업체는 기획과 디자인에 중점을 두는 경향이 있다. 이렇게 하려면 굳이 새로운 조직을 구성할 필요가 있을까? 사용자 경험 디자인은 어느 것 하나라도 놓치지 않으려는 디자인 측면의 노력이자 방법이다.

따라서 사용자 경험 디자인 조직은 좀더 다양한 배경의 인력으로 구성되어야 하고, 이들의 결과물이 골고루 반영될 수 있는 업무 체계가 필요하다. 그 다음 통합을 이루는 것이 중요하다. 다양한 배경을 가진 사람들이 참여하는 만큼 서로 다른 의견에 직면하게 되는데, 이것을 통합적 관점에서 해결해야 한다. 그리고 사용자 경험 디자인은 단순하지 않다. 이해해야 할 것들을 면밀하게 관찰하고, 제공해야 할 요소를 적절하게 구성하고, 해결해야 할 문제를 지혜롭게 제안하는 활동 등 다양한 디자인 활동이 필요하며, 이러한 활동이 개별적으로 이루어지는 것이 아니라 사용자 경험 관점에 의해 통합되어야만비로소 사용자 경험 디자인이라고 부를 수 있다.

Mobile Application UI Library

Mobile Application UI Library

방법 및 테크닉ㆍMethods & Techniques
01. 인증 후 사용ㆍLogin First
02. 등록 후 사용ㆍMust Sign-Up
03. 업데이트 후 사용ㆍUpdate First
04. 확인 후 사용ㆍConfirmation First
05. 사용자에 의한 시작ㆍClick Here to Begin
06. 신중한 확인을 위한 제약ㆍConstraints for Careful User Confirmation
07. 반응에 의한 활성화ㆍResponsive Enabling
08. 일련의 회원가입 프로세스ㆍSign-Up in Single Context
09. 분기시키기ㆍBranching-Off
10. 순서화된 컨트롤ㆍOrdered Controls
11. 마법사ㆍWizard
12. 스텝핑ㆍStepping
13. 백스텝핑ㆍBackstepping
14. 북마크ㆍBookmark
15. 페이지 찾아가기ㆍGo to Page
16. 무작위 선택ㆍRandom Selection
17. 일직선 만들기ㆍSame Line to Match
18. 자세히 보기ㆍMore Details
19. 상세 정보를 볼 수 있는 개요ㆍOverview by Detail
20. 다음 내용 보여주기ㆍWhat’s Next Contents
21. 결과 비교하기ㆍComparing Results
22. 카테고리 추가하기ㆍAdd Category
23. 2단계 확인ㆍTwo Step Confirmation
24. 빠른 저장ㆍInstant Save
25. 인스턴트 체크ㆍInstant Check
26. 풀다운에 의한 리프레시ㆍPull Down to Refresh
27. 다이내믹 로딩ㆍDynamic Loading
28. 프리로더ㆍPreloader
29. 태핑에 의한 아이템 바꾸기ㆍTapping to Change Items
30. 설정 초기화ㆍRestore Default Settings
31. 반복되는 화면ㆍRepeated Screen If Not Confirmed
32. 위지윅 설정ㆍWYSIWYG Settings
33. 상품 구성기ㆍProduct Configurator
34. 계산기ㆍCalculator
35. 투표하기ㆍPoll
36. 개요 정보ㆍOverview
37. 도움말ㆍHelp
38. 제스처 설명ㆍInstructions for Gesture
39. 사용법 범례ㆍInstruction Legend
40. 내보내기/가져오기ㆍExport & Import
41. 체험하기ㆍDemo
42. 셰이크 컨트롤ㆍShake Control
43. 지그재그 모션ㆍZigzagging

레이아웃과 스크린ㆍLayout & Screen 
44. 아이콘 방식의 초기 화면ㆍHome Screen with Icon Sets
45. 가로 화면 전용ㆍLandscape-Only
46. 세로 구성ㆍVertical Layout
47. L자형 레이아웃ㆍL-Shape Layout
48. 타일 모양의 레이아웃ㆍTiled Layout
49. 2단 레이아웃ㆍTwo-Column Layout
50. 2면 레이아웃ㆍDiptych Layout
51. 멀티 바 레이아웃ㆍMultiple Bar Layout
52. 경로 중심의 설계ㆍCourse-Focused Design
53. 페이지 인덱스ㆍPage Index
54. 요약 페이지ㆍSummary Page
55. 메타데이터 페이지ㆍMetadata Page
56. 상세 페이지ㆍDetail Page
57. 개인화 페이지ㆍPersonalized Page
58. 더 보기 화면ㆍMore Screen
59. 탭 바 설정 화면ㆍConfigure Screen
60. 편집 모드ㆍEdit Mode
61. 긴 제목ㆍLong Title
62. 강화된 읽기 화면ㆍEnhanced Reading View
63. 푸터 없는 화면ㆍScreen without Footer
64. 투명한 페이지ㆍTransparent Page
65. 팝업 뷰ㆍPop-up View
66. 팝오버 뷰ㆍPop-over View
67. 문서 캔버스ㆍDocument Canvas
68. 정보 패널ㆍInformation Panel
69. 컨트롤 패널ㆍControl Panel
70. 레이어 컨트롤ㆍLayered Controls
71. 반투명 정보 패널ㆍTranslucent Information Panel
72. 모달 패널ㆍModal Panel
73. 고정 헤더ㆍFixed Header
74. 이미지 스트립ㆍImage Strip
75. 뉴스 티커ㆍNews Ticker
76. 아코디언 패널ㆍVertical Accordion Panels
77. 보기 옵션ㆍView Options
78. 서가로 보기ㆍBookshelf View
79. 탭 뷰ㆍTabbed View
80. 듀얼 뷰ㆍDual View Mode
81. 이미지 뷰어ㆍImage Viewer
82. 미리보기ㆍPreview
83. 페이지 매기기ㆍPagination
84. 자동 페이지 매기기ㆍAuto-Pagination
85. 이어지는 스크롤ㆍContinuous Scrolling
86. 화면 토글링ㆍFull-Screen Toggling
87. 스크린 시프트ㆍScreen Shift
88. 로테이션에 의한 보기 모드ㆍChange View Mode through Rotation of the Device
89. 랜덤 슬라이드쇼ㆍRandom Slideshow
90. 자동 슬라이딩 초기 화면ㆍAuto Sliding Home Screen

메뉴ㆍMenus 
91. 메인 메뉴ㆍMain Menus
92. 테이블 형식의 메인 메뉴ㆍMain Menu with Table
93. 팝업 메인 메뉴ㆍPop-Up Main Menus
94. 슬라이딩 메뉴ㆍSliding Menus
95. 더블 슬라이딩 메뉴ㆍDouble-Sliding Menus
96. 2단 탭 메뉴(Double-Layered Tab Menus
97. 회전 메뉴ㆍCarrousel
98. 원형 메뉴ㆍCircular Menus
99. 스핀 메뉴ㆍSpin Menus
100. 옵션 메뉴ㆍOption Menus
101. 컨텍스트 메몴ㆍContext Menus
102. 스스로 움직이는 메뉴ㆍSelf-Moving Menus
103. 플로팅 메뉴ㆍFloating Menus
104. 플라이 아웃 메뉴ㆍFly-Out Menus
105. 풀업 메뉴ㆍPull-Up Menu
106. 반복 메뉴ㆍRepeated Menu
107. 트리 테이블ㆍTree Table
108. TV 스케줄 메뉴ㆍTV Schedule Menus

컨트롤 바ㆍControl Bar 
109. 내비게이션 바ㆍNavigation Bars
110. 커스텀 내비게이션 바ㆍCustom Navigation Bar
111. 정보성 내비게이션 바ㆍInformative Navigation Bars
112. 실행 바ㆍAction Bar
113. 아이덴티티 바ㆍIdentity Bar
114. 이중 상태 바ㆍDouble-High Status Bar
115. 제목 바ㆍTitle Bar
116. 소제목 바ㆍSub-Title Bar
117. 탭 바ㆍTab Bars
118. 커스텀 탭 바ㆍCustom Tab Bar
119. 슬라이딩 탭 바ㆍSliding Tab Bars
120. 툴 바ㆍToolbar
121. 커스텀 툴 바ㆍCustom Toolbar
122. 정보성 툴 바ㆍInformative Toolbars
123. 알림 바ㆍNotification Bar
124. 정보 바ㆍInformation Bar
125. 다운로드 바ㆍDownload Progress Bar
126. 재생 컨트롤 바ㆍPlayback Control Bar
127. 미니 재생 컨트롤 바ㆍMini Playback Control Bar
128. 자동 접힘 내비게이션 바ㆍAuto-Collapsible Navigation Bar
129. 슬라이드업 바ㆍSlide-Up Bar
130. 키보드 툴 바ㆍKeyboard Toolbars
131. 스크롤 바ㆍScroll Bar

버튼ㆍButtons 
132. 내비게이션 버튼ㆍNavigational Button
133. 둥근 사각형 버튼ㆍRounded Rectangle Button
134. 자세히 보기 버튼ㆍDetail Disclosure Button
135. 실행 버튼ㆍAction Button
136. 완료 버튼ㆍDone Button
137. 정보 버튼ㆍInfo Button
138. 설정 버튼ㆍSetting Button
139. 마이크로폰 버튼ㆍMicrophone Button
140. 소거 버튼ㆍDestructive Button
141. 삭제 제어 버튼ㆍDelete Control Button
142. 삭제 버튼ㆍDelete Button
143. 가로 행 추가 버튼ㆍRow Insert
144. 전체 삭제 버튼ㆍButton for Delete All
145. 라디오 버튼ㆍRadio Button
146. 체크 버튼ㆍCheck Button
147. 더 보기 탭ㆍMore Tab
148. 분절화된 컨트롤ㆍSegmented Control
149. 액션 시트ㆍAction Sheet
150. 푸시 버튼 스위치ㆍPush-Button Switch
151. 토글 스위치ㆍToggle Switch
152. 사이드 탭 컨트롤ㆍSide Tab Contorls
153. 인라인 옵션 컨트롤ㆍInline Option Controls
154. 블라인드 버튼ㆍWindow Shade Button
155. 슬라이드 버튼ㆍSlide Button
156. 유인 버튼ㆍAffordable Button
157. 구독 버튼ㆍSubscribe Button
158. 확대 버튼ㆍZoom-In Button
159. 동기화 버튼ㆍSync Button
160. 이미지 맵 버튼ㆍImage Map Button
161. 캡션 버튼ㆍCaption Button
162. 설명 버튼ㆍDescription Button
163. 전후 이동 버튼ㆍBack and Forth Button
164. 페이지 내 이동 버튼ㆍButtons for Browsing in a Page
165. 모바일 웹 버튼ㆍGo Button for Transition to the Web
166. 더 보기 버튼ㆍMore Button
167. 쇼하이드 버튼ㆍShow-Hide Button
168. 모서리 버튼ㆍDog-Ear Button
169. 업데이트 배너 버튼ㆍBanner Button for Update
170. 미동작 버튼ㆍNon-Actionable Button
171. 자동회전 잠금 버튼ㆍAuto-Rotation Lock Button
172. 큰 버튼ㆍBig Button
173. 버튼 스택ㆍStack of Buttons
174. 버튼 배지ㆍButton Badge
175. 긴 레이블ㆍControls with Long Labels
176. 인라인 링크ㆍInline Links

얼럿ㆍAlerts 
177. 버튼 없는 얼럿ㆍAlert without Any Button
178. 텍스트 박스 얼럿ㆍAlert with Text Box
179. 원 버튼 얼럿ㆍOne Button Alert
180. 투 버튼 얼럿ㆍTwo Buttons Alert
181. 상태 표시기 얼럿ㆍAlert with Progress Indicator
182. 프롬프트 얼럿ㆍAlert with Prompt
183. 체크 박스 얼럿ㆍAlert with Checkbox
184. 토스트 메시지ㆍToast Message

픽커ㆍPickers 
185. 스피너ㆍSpinner
186. 싱글 픽커ㆍSingle Picker
187. 멀티 픽커ㆍMultiple Picker
188. 연결된 픽커ㆍLinked Picker
189. 시간 픽커ㆍTime Picker
190. 날짜 픽커ㆍDate Picker
191. 캘린더ㆍCalendar
192. 텍스트 픽커ㆍText Picker
193. 커스텀 픽커ㆍCustom Picker
194. 컬러 픽커ㆍColor Picker

테이블과 리스트ㆍTable & Lists 
195. 단순한 리스트ㆍSimple List
196. 그룹화된 리스트ㆍGrouped List
197. 목록화된 리스트ㆍIndexed Lists
198. 모듈화된 리스트ㆍModular Lists
199. 상세한 리스트ㆍDetailed Lists
200. 복잡한 리스트ㆍList with Complicated Structure
201. 인덱스 리본ㆍIndex Ribbon
202. 피시아이 인덱스 리본ㆍFisheye Index Ribbon
203. 카드 인덱스ㆍCard Index
204. 커버 플로우ㆍCover Flow
205. 더 보기 표시ㆍDisclosure Indicator
206. 더 보기 리스트ㆍList for More Results
207. 다중 선택 리스트ㆍMulti-Selection Lists
208. 이동 가능한 리스트ㆍMovable Lists
209. 방문한 리스트ㆍVisited List
210. 추천 리스트ㆍFeatured List
211. 풀다운 옵션 리스트ㆍPull-down Option Lists
212. 강조된 리스트ㆍMarked Lists
213. 열고 닫히는 인덱스 바ㆍOpenable & Closable Index Bar
214. 위시 리스트ㆍWish List
215. 상품 리스트ㆍProduct Lists
216. TOCㆍTable of Contents
217. 시간표ㆍtimetable
218. 프레임화된 테이블(Framed Table
219. 데이터 테이블ㆍData Table
220. 테이블 헤더ㆍTable Header
221. 테이블 소터ㆍTable Sorter
222. A-Z 인덱스ㆍA-Z Index
223. 테이블 범례ㆍTable Legend
224. 이동식 데이터 셀ㆍMoving Data Cell
225. 포토 갤러리ㆍPhotos Gallery
226. 포토 스택ㆍStack of Photos
227. 폴더링ㆍFoldering
228. 캡션ㆍCaption
229. 순서 매기기ㆍOrdered Contents
230. 숫자 레이블ㆍNumbered Label

입력 요소ㆍInput Elements 
231. 텍스트 필드ㆍText Field
232. 키보드 커서ㆍKeyboard Cursor
233. 텍스트 카운터ㆍText Counter
234. 구조화된 입력 형식ㆍStructured Input Format
235. 관대한 입력 형식ㆍForgiving Input Format
236. 코멘트 뷰ㆍComment View
237. 플레이스홀더 텍스트ㆍPlaceholder Text
238. 입력 힌트ㆍInput Hints
239. 인스턴트 입력ㆍInstant Input Mode
240. 텍스트 필드 하이라이팅ㆍText Field Highlighting
241. 빈칸 채우기ㆍFill In The Blanks
242. 터치 앤 홀드 컨트롤ㆍTouch-and-Hold Control
243. 커스텀 키보드ㆍCustom Keyboard
244. 커스텀 숫자 키패드ㆍCustom Numeric Keypad
245. 슬라이더ㆍSlider
246. 더블 슬라이더ㆍDouble Slider
247. 맞춤 슬라이더 썸ㆍCustom Slider Thumb
248. 텍스트 크기 조절기ㆍText Enlarger

표시 및 마크ㆍIndicator & Mark 
249. 동작 표시기ㆍActivity Indicator
250. 푸시 알림ㆍPush Notifications
251. 페이지 표시ㆍPage Indicator
252. 스크린 컬ㆍScreen Curl
253. 가로 행 조정 표시ㆍRow Reorder
254. 다운로드 표시기ㆍDownload Indicator
255. 소극적인 알림ㆍPassive Notifications
256. 시선 끌기 아이콘ㆍSmall Icon for Spotlight
257. 캘린더 아이콘ㆍCalendar Icon
258. 상태 아이콘ㆍStatus Icon
259. 식별자ㆍIdentifier
260. 체크 마크ㆍCheckmark
261. 연락 가능 표시ㆍPresence Indicator
262. 즐겨찾기 마크ㆍFavorite Mark
263. 비디오 마크ㆍVideo Mark
264. 로딩 커버ㆍLoading Cover
265. 그림 노트ㆍNotes in the Picture
266. 포토 마크ㆍPhoto Mark
267. 코너 리본ㆍCorner Ribbon
268. 피플 마크ㆍPeople Mark
269. 프렌즈 마크ㆍFriends Mark
270. 네임 태그ㆍName Tag
271. 코멘트 마크ㆍComment Mark
272. 데모 마크ㆍDemo Mark
273. 레벨 표시기ㆍLevel Indicator
274. 생략 기호ㆍEllipsis Mark In Button
275. 축약된 심볼ㆍAbbreviated Symbols
276. 브레드크럼ㆍBreadcrumbs

검색ㆍSearching 
277. 검색 바ㆍSearch Bar
278. 범위 바ㆍScope Bar
279. 앞뒤로 이동 가능한 검색 바ㆍSearch Bar with Back and Forth Buttons
280. 상세 검색ㆍAdvanced Search
281. 검색 모드ㆍSearch Mode
282. 입력된 검색 필드ㆍPre-filled Search Field
283. 자동 완성ㆍAutocomplete
284. 연필 버튼ㆍPencil Button
285. 인스턴트 서치ㆍInstant Search
286. 검색 결과ㆍSearch Results
287. 검색 요약ㆍSearch Result Summary
288. 키워드 매치ㆍKeyword Matches
289. 검색 결과 하이라이팅ㆍSearch Results Highlighting
290. 태그 클라우드ㆍTag Cloud
291. 디자인 검색ㆍDesign Search

지도와 위치ㆍMap & Location 
292. 구글 맵ㆍGoogle Map
293. 커스텀 맵ㆍCustom Map
294. 정보 버블ㆍInformation Bubble
295. 위치 버튼ㆍLocation Button
296. 위치 입력기ㆍLocator
297. 길 찾기ㆍWayfinding
298. 맵 핀ㆍMap Pin
299. 맵 범례ㆍMap Legend
300. 맵 소터ㆍMap Sorter
301. 레이더 맵ㆍRadar Map
302. 찾아가는 길 리스트ㆍDirections List
303. 내비게이션 뷰ㆍNavigation View
304. AR 뷰ㆍAugmented Reality View

시각화 기법ㆍVisualization 
305. 명확한 대비ㆍClear Contrast
306. 폰트 대비ㆍFonts Contrast
307. 명확한 하이라이팅ㆍClear Highlighting
308. 선택된 아이템ㆍSelected Item
309. 색으로 구분된 영역ㆍColor Coded Section
310. 교차 배색ㆍAlternating Row Colors
311. 시각적 단위ㆍVisual Chunk
312. 큰 글자ㆍLarge Type
313. 큰 숫자ㆍLarge Numbers
314. 강한 색의 버튼ㆍStrong Color Button
315. 다채색 컨트롤ㆍMulti-Color Controls
316. 진한 배경ㆍDeep Background
317. 무늬 있는 배경ㆍTextured Background
318. 종이 배경ㆍPaper Background
319. 포스트잇ㆍPost-it
320. 그림으로 선택하기ㆍIllustrated Choices
321. 일러스트레이션 사용하기ㆍUsing Illustration
322. 그래픽 배지ㆍGraphic Badge
323. 말 풍선ㆍWord Balloons
324. 콜아웃ㆍCallout
325. 폴라로이드 프레임ㆍPolaroid Frame
326. 필름스트립ㆍFilmstrip
327. 스코어보드ㆍScoreboard
328. 사진 프레임ㆍPicture Frame
329. 모서리 다루기ㆍCorner Treatment

룩앤필ㆍLook & Feel 
330. 은유적 디자인ㆍMetaphorical Design
331. 사실적인 디자인ㆍRealistic-Looking Design
332. 깔끔한 디자인ㆍClean Design
333. 대시보드 디자인ㆍDashboard Design
334. 자연스러운 형태ㆍNatural Shape
335. 나무 스타일ㆍWooden Style
336. 가죽 스타일ㆍLeather Style
337. 금속 스타일ㆍMetallic Style
338. 노트 스타일ㆍNotebook Paper Style
339. 모노톤 스타일ㆍMonotone Style
340. 올드 페이퍼 스타일ㆍOld Paper Style
341. 패브릭 스타일ㆍFabric Style
342. 매거진 스타일ㆍMagazine Style
343. 태그 스타일ㆍTag Style
344. 수채화 스타일ㆍWatercolor Style
345. 미니멀 스타일ㆍMinimal Style
346. 그런지 룩 스타일ㆍGrunge Look Style

소셜 네트워킹ㆍSocial Networking 
347. 소셜 아이콘ㆍSocial Icon
348. 프로필 카드ㆍProfile Card
349. 프로필 페이지ㆍProfile Page
350. 소셜 프로필ㆍSocial Profile
351. 소셜 버튼ㆍSocial Button
352. 라이프스트림ㆍLifestream
353. 사용자 평가ㆍUser Rating
354. 찬성-반대 버튼ㆍThumb Up & Down Buttons

마케팅 요소ㆍMarketing Elements 
355. 슬라이드업 배너ㆍSlide-up Banner
356. 리스트 타입의 배너 광고ㆍList-Like Banner AD
357. 중간 광고ㆍInterstitial AD
358. 가격표ㆍPrice Tag
359. 쿠폰ㆍCoupon
360. 관련 애플리케이션ㆍRelated Application
361. 회원제 콘텐츠ㆍMembers Only Content