$\require{mediawiki-texvc}$

연합인증

연합인증 가입 기관의 연구자들은 소속기관의 인증정보(ID와 암호)를 이용해 다른 대학, 연구기관, 서비스 공급자의 다양한 온라인 자원과 연구 데이터를 이용할 수 있습니다.

이는 여행자가 자국에서 발행 받은 여권으로 세계 각국을 자유롭게 여행할 수 있는 것과 같습니다.

연합인증으로 이용이 가능한 서비스는 NTIS, DataON, Edison, Kafe, Webinar 등이 있습니다.

한번의 인증절차만으로 연합인증 가입 서비스에 추가 로그인 없이 이용이 가능합니다.

다만, 연합인증을 위해서는 최초 1회만 인증 절차가 필요합니다. (회원이 아닐 경우 회원 가입이 필요합니다.)

연합인증 절차는 다음과 같습니다.

최초이용시에는
ScienceON에 로그인 → 연합인증 서비스 접속 → 로그인 (본인 확인 또는 회원가입) → 서비스 이용

그 이후에는
ScienceON 로그인 → 연합인증 서비스 접속 → 서비스 이용

연합인증을 활용하시면 KISTI가 제공하는 다양한 서비스를 편리하게 이용하실 수 있습니다.

인터페이스 디자인의 시각적 무게
Visual Weight of Interface Design 원문보기

디지털융복합연구 = Journal of digital convergence, v.17 no.12, 2019년, pp.461 - 466  

박찬익 (청운대학교 멀티미디어학과)

초록
AI-Helper 아이콘AI-Helper

본 연구에서는 인터페이스의 디자인에 있어 시각적 무게에 따라 디자인을 구성할 수 있음을 알아보았다. 우선 인터페이스 디자인은 스큐어모피즘의 시대를 거쳐 플랫디자인에서 머티리얼 디자인 또는 머리티얼 디자인 일부를 차용해 심도와 차원을 표현하고 있었다. 이는 심도와 차원을 표현하기 어려운 메트로 UI와 플랫디자인의 특징에 의한 것이지만 머티리얼 디자인에서는 시선 유도를 위한 별도의 장치는 없었기에 게슈탈트 이론에서 시각적 무게를 구분할 수 있는 원리에 대해 알아보았다. 포지티브와 네거티브, 영역의 크기와 배치, 근접성, 폐쇄성 그리고 관념성이 시각적 무게와 방향에 대해 밀접한 관련이 있었으며 그를 통해 몇 가지 사례를 통해 인터페이스에 적용될 수 있음을 알 수 있었다.

Abstract ▼ AI-Helper 아이콘AI-Helper

In this study, we found that the design can be configured according to the visual weight in the design of the interface. First of all, interface design has gone through the era of squeeze morphism to express depth and dimension by borrowing part of material design or head design from flat design. Th...

주제어

#인터페이스 디자인   #시각적 무게   #게슈탈트 원리   #디자인 원리   #시각적 힘   #시각적 방향  

표/그림 (12)

AI 본문요약
AI-Helper 아이콘 AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

  • 우선 인터페이스 디자인은 플랫디자인에서 머티리얼 디자인 또는 머리티얼 디자인 일부를 차용해 심도와 차원을 표현하고 있다는 것을 알 수 있었다. 그러나 시선 유도를 위한 별도의 장치는 없었기에 게슈탈트 이론에서 시각적 무게를 구분할 수 있는 원리에 대해 알아보았다. 포지티브와 네거티브, 영역의 크기와 배치, 근접성, 폐쇄성 그리고 관념성이 시각적 무게와 방향에 대해 밀접한 관련이 있었으며 그를 통해 실제 인터페이스 디자인에 적용하기 위한 방식에 대해 알아보았다.
  • 이를 위해 각 인터페이스 디자인의 특징에 대해 알아보고 시각적 위계에 영향을 미치는 디자인 원리에 대해 게슈탈트 원리를 대입해 시각적 무게를 표현하는 방식을 알아보고자 한다. 그를 통해 웹과 모바일에서 시각적 무게를 조절하여 사용자의 직관성을 높일 수 있는 방안을 제안하고자 한다.
  • 머티리얼 디자인에서는 Z축의 그림자 높이를 사용해 심도와 차원을 표현하고 있다[1-3]. 따라서 본 연구에서는 인터페이스의 구성 요소에 있어 심도와 차원을 표현하는 요소들에 대해 알아보고 시각적 위계를 위한 시각적 무게에 영향을 미치는 디자인 원리에 대해 조사하여 메트로 UI 및 머티리얼 디자인을 좀 더 효과적으로 인터페이스에서 구현할 수 있는 방안에 대해 연구하고자 한다. 이를 위해 각 인터페이스 디자인의 특징에 대해 알아보고 시각적 위계에 영향을 미치는 디자인 원리에 대해 게슈탈트 원리를 대입해 시각적 무게를 표현하는 방식을 알아보고자 한다.
  • 본 연구에서는 인터페이스의 디자인에 있어 시각적 무게에 따라 디자인을 구성할 수 있음을 알아보았다. 우선 인터페이스 디자인은 플랫디자인에서 머티리얼 디자인 또는 머리티얼 디자인 일부를 차용해 심도와 차원을 표현하고 있다는 것을 알 수 있었다.
  • 그러나 시선 유도를 위한 별도의 장치는 없었기에 게슈탈트 이론에서 시각적 무게를 구분할 수 있는 원리에 대해 알아보았다. 포지티브와 네거티브, 영역의 크기와 배치, 근접성, 폐쇄성 그리고 관념성이 시각적 무게와 방향에 대해 밀접한 관련이 있었으며 그를 통해 실제 인터페이스 디자인에 적용하기 위한 방식에 대해 알아보았다. 최근 데스크톱의 사용보다 모바일의 사용이 높은 만큼 모바일 인터페이스 패턴을 모두 조사하지 못한 것은 연구의 한계이지만 작은 화면에서 전체적인 시각적 균형을 이루고 시선을 유도할 수 있는 무게의 배치에 있어서는 충분히 고려할 필요가 있다.
본문요약 정보가 도움이 되었나요?

질의응답

핵심어 질문 논문에서 추출한 답변
플랫 디자인이란 무엇인가? 플랫 디자인은 입체적이고 복잡한 그래픽 요소를 배제 하고 단순한 컬러와 구성을 통해 직관적으로 인식할 수 있도록 그리드를 기반으로 한 레이아웃으로 구성된 평면 디자인 방식이다.
개성이 없고 모든 디자인 스타일이 유사해지는 것을 보완하기 위한 방법은? 그리드에 기반 한 콘텐츠의 분할과 산세리프 폰트 그리고 비슷한 컬러 등의 제한된 원칙은 플랫디자인의 유행에 따라 개성이 없고 모든 디자인 스타일이 유사해 질 수밖에 없다. 이를 보완하기 위해 그레이디언트나 블러(Blur) 처리를 통해 요소들 간의 우선순위를 표현하기 시작했는데 이를 플랫 2.0 또는 딥 플랫(Deep Flat)이라고 부른다. 하지만 딥플랫 방식 보다는 최근의 iOS는 머티리얼 디자인을 차용 하여 사용하는 사례가 더 많다.
플랫 디자인의 장점은 무엇인가? 플랫 디자인은 단순한 면 분할, 대비가 높은 과감한 컬러, 광택이나 그림자 같은 입체적인 기능의 복잡한 요소를 배제한 도안화 된 아이콘과 가독성이 높은 타이포그래피 및 손쉬운 반응형 디자인 전환, 빠른 로딩을 장점으로 들 수 있다. 디자인의 기능에 중점을 두어 그리드의 크기와 컬러의 변화에 의존하는 플랫 디자인은 디자인의 기능에 중점을 두었지만 심도와 차원을 표현하는 그림자와 깊이가 부족하면서 평면 형태를 직관적으로 알아보기 어려운 문제가 발생할 수 있다.
질의응답 정보가 도움이 되었나요?

참고문헌 (17)

  1. Y. J. Lee. (2015). UI / UX Design Theory and Practice. Seoul : HanbitAcademy. 

  2. Y. J. Lee. (2015). Mobile UI / UX Design Practice. Seoul : HanbitAcademy. 

  3. K. H. Lee. (2018). UX / UI design to create a user experience. Seoul : Freerack. 

  4. https://vanseodesign.com/about/ 

  5. A. Bregman. (1990). Auditory Scene Analysis: the perceptual organization of sound. Boston, MA: The MIT Press. 

  6. W. Kohler. (1929). Gestalt Psychology. New York: Liveright. 

  7. K. Koffka. (1935). Principles of Gestalt Psychology. New York: Harcourt, Brace. 

  8. S. Palmer. (1999). Vision Science. Photons to Phenomenology. Cambridge, MA: MIT Press. 

  9. D. Todorovic. (2007). W. Gestalt Theory. Metzger: Laws of Seeing, 28, 176-180. 

  10. P. R. Roelfsema. (2006). Cortical Algorithms for Perceptual Grouping. Annual Review of Neuroscience, 29, 203-227 

    상세보기 crossref

  11. J. S. Kang. (2018). User experience of responsive web on multi-device environment. Journal of Digital Convergence, 16(11), 465-470. DOI : 10.14400/JDC.2018.16.11.465 

    원문보기 상세보기 crossref

  12. S. C. Beak. (2017). A Study on the Process of Refining Ideas for Social Problem Solving Based on Design Thinking in Digital Convergence Era. Journal of Digital Convergence, 15(2), 155-163. DOI : 10.14400/JDC.2017.15.2.155 

    원문보기 상세보기 crossref

  13. I. K. Chun. (2015). Study of GUI design convergence guideline for the users of aged generation. Journal of Digital Convergence, 13(7), 323-331. DOI : 10.14400/JDC.2015.13.7.323 

    원문보기 상세보기 crossref

  14. Y. J. Lee. (2015). A Study on Information Architecture & User Experience of the Smartphone. Journal of Digital Convergence, 13(11), 383-390. DOI : 10.14400/JDC.2015.13.11.383 

    원문보기 상세보기 crossref

  15. S. M. Na. (2016). The Visual communication by Augmented Reality. Journal of Digital Convergence, 14(11), 507-512. DOI : 10.14400/JDC.2016.14.11.507 

    원문보기 상세보기 crossref

  16. S. H. Noh et al. (2019). Effect of Support Surface and Visual Condition on Static Balance. Journal of the Korea Convergence Society, 10(7), 47-54. 

    원문보기 상세보기 crossref

  17. J. M. Na. (2019). The Effect of Different Types of Visual Images on the Variables of the Theory of Planned Behavior. Journal of the Korea Convergence Society, 10(2), 255-260. 

    원문보기 상세보기 crossref

저자의 다른 논문 :

관련 콘텐츠

오픈액세스(OA) 유형

BRONZE

출판사/학술단체 등이 한시적으로 특별한 프로모션 또는 일정기간 경과 후 접근을 허용하여, 출판사/학술단체 등의 사이트에서 이용 가능한 논문

이 논문과 함께 이용한 콘텐츠

저작권 관리 안내
섹션별 컨텐츠 바로가기

AI-Helper ※ AI-Helper는 오픈소스 모델을 사용합니다.

AI-Helper 아이콘
AI-Helper
안녕하세요, AI-Helper입니다. 좌측 "선택된 텍스트"에서 텍스트를 선택하여 요약, 번역, 용어설명을 실행하세요.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.

선택된 텍스트

맨위로