찐망고'S 퍼블리싱그리고디자인

구글 머터리얼 디자인 - Imagery

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Imagery부분에 대해 포스팅 해볼까요 Imagery Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.m3.material.io  이미지의 종류이미지에 접근성 지침을 적용하려면, 이미지의 종류에 따라 기준이 다르기 때문에 이를 이해하는 것이 중요합니다. 1. 장식용 이미지장식용 이미지는 페이지 내용에 중요한 정보를 추가하지 않는 이미지입니다.W3C 기준에 따르면, 장식용 이미지는 다음과..

안녕하세요 찐망고입니다.머터리얼 디자인에서 접근성 텍스트 관련 포스팅 입니다. Writing   접근성 텍스트란?접근성 텍스트는 Google의 TalkBack(안드로이드), Apple의 VoiceOver(iOS), **Freedom Scientific의 JAWS(데스크톱)**과 같은 스크린 리더 접근성 소프트웨어에서 사용됩니다.스크린 리더는 **화면에 표시된 텍스트와 UI 요소(버튼 등)**을 읽어주며, 보이는 텍스트와 **보이지 않는 대체 텍스트(Alternative Text)**도 읽어줍니다.    보이는 텍스트와 보이지 않는 텍스트보이는 텍스트: UI 요소의 레이블, 버튼의 텍스트, 링크, 양식 등에 표시되는 텍스트.보이지 않는 텍스트: 이미지에 대한 대체 텍스트처럼 화면에 표시되지 않는 설명 경우..

안녕하세요 찐망고입니다.오늘은 머터리얼 디자인, 레이아웃과 타이포그래피 관련 포스팅을 해볼게요  Material Design의 터치 대상 가이드라인은 화면을 볼 수 없거나 작은 터치 대상을 누르기 어려운 사용자들이 앱 내의 요소를 쉽게 탭할 수 있도록 돕습니다. Layout and typography 터치 및 포인터 대상 (Touch & Pointer Targets) 터치 대상 (Touch Targets)터치 대상은 사용자 입력에 반응하는 화면의 일부입니다. 이들은 요소의 시각적 경계를 넘어 확장됩니다. 예를 들어, 아이콘의 크기가 24 x 24dp일 수 있지만, 주변 패딩이 포함되어 전체 48 x 48dp의 터치 대상을 형성합니다.대부분의 플랫폼에서는 터치 대상을 최소 48 x 48dp로 설정하는 것이..

안녕하세요 찐망고입니다.역시나 머터리얼 디자인 시리즈를 이어가며 접근성에 관련된 컬러에 대해 자세히 알아보겠습니다. Color and Contrast Color and Contrast (색상과 대비) 색상과 대비는 사용자가 앱의 콘텐츠를 보고 이해하고, 올바른 요소와 상호작용하며, 동작을 이해하도록 돕는 데 사용될 수 있습니다.   More accessible color (더 접근성 있는 색상) 색상은 분위기, 톤, 중요한 정보를 전달하는 데 도움을 줄 수 있습니다. 주 색상, 보조 색상, 강조 색상을 신중히 선택하면 사용성이 향상됩니다. 요소 간 충분한 색상 대비는 시력이 약한 사용자도 앱을 쉽게 사용할 수 있도록 돕습니다.   Contrast ratios (대비 비율)색상 대비는 사용자가 다양한 ..

안녕하세요 찐망고입니다 아마 당분간은 머터리얼디자인페이지 관련 포스팅을 할 것 같아요물론 번역해서 직접 보셔도 편하겠지만...  Hierarchy  Hierarchy는 우리나라 말로 계층이라는 뜻인데요 계층이란 UI에서 말하는 계층은 정보와 요소들 간의 중요도나 관계를 구조화하는 방식을 의미합니다. 마치 회사 조직도나 가계도처럼, 정보들 사이에도 주종 관계가 있다는 개념입니다. 계층을 사용하는 이유가 있겠죠? 정보의 우선순위 표현가장 중요한 정보는 크게, 눈에 띄게부가적인 정보는 작게, 덜 강조되게예: 뉴스 사이트의 헤드라인(큼) vs 기사 본문(작음)관계성 표현메인 메뉴 → 서브 메뉴 → 세부 항목상위 카테고리 → 하위 카테고리예: 쇼핑몰의 의류 → 상의 → 티셔츠사용자의 인지 부담 감소많은 정보를 체..

안녕하세요 찐망고입니다.  Material Design 접근성안녕하세요 찐망고입니다. Material Design은 Google에서 2014년에 개발한 디자인 언어로,웹과 모바일 애플리케이션의 사용자 인터페이스(UI) 및 사용자 경험(UX)을 향상시키기 위해 만들어졌는데요. Mauiweb.tistory.com 오늘은 Material Design에서 중요한 요소 중 하나인 접근성과 관련하여, 특히 보조 기술(Assistive Technology)에 대해 알아보겠습니다   Assistive technology  보조 기술은 장애를 가진 개인의 기능 능력을 향상, 유지, 또는 개선하는 데 도움을 줍니다.스크린 리더(screen readers), 확대 도구(magnification tools), 보청기(hear..

안녕하세요 찐망고입니다. Material Design은 Google에서 2014년에 개발한 디자인 언어로,웹과 모바일 애플리케이션의 사용자 인터페이스(UI) 및 사용자 경험(UX)을 향상시키기 위해 만들어졌는데요. Material Design 사이트는 디자이너와 개발자들에게 이 디자인 시스템을 쉽게 적용할 수 있도록 가이드라인, 구성요소, 도구 등을 제공합니다. https://m2.material.io/design/usability/accessibility.html#understanding-accessibility Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by op..

안녕하세요 찐망고 입니다. 이번 포스팅에서는 타이포그래피와 SVG가 만나 트렌디한 웹디자인을 완성하는 방법을 다뤄볼게요. 이 조합은 이미 많은 브랜드 웹사이트에서 사랑받고 있는 디자인 요소죠. 직관적이고 기억에 남는 시각적 효과를 주는 데 제격이라 요즘 웹디자인에서 빠질 수 없는 트렌드랍니다.왜 인기를 얻을까요? 텍스트와 이미지의 자연스러운 결합 글자 속에 아이콘이 삽입되어 단순 텍스트보다 시각적으로 더 재미있고 기억에 남습니다. 메시지를 직관적으로 전달 심플하고 깔끔한 구성이 메시지를 한눈에 이해할 수 있게 돕습니다. 보는 순간 "아하!" 하고 느껴지는 디자인이 강점이에요. 트렌디한 컬러 활용 시원한 파랑, 밝은 노랑 등 브랜드 특성을 살리는 색..

안녕하세요 찐망고입니다.  올해는 정말 롤링의 시대였죠! 사실 작년부터 슬슬 등장했지만, 올해는 웹사이트 레퍼런스에서 롤링 텍스트가 거의 필수 요소처럼 자리 잡았던 것 같아요. 그래서 그런지 저도 이 주제로 코드 관련 포스팅만 세 개를 올렸던 기억이 나네요. 😄  그만큼 많이 사용하고 앞으로도 당분간은 사용할 것 같은 이 디자인은 일반적으로 스크롤 애니메이션이나 무한 루프 효과를 사용해 텍스트나 배너 박스가 자연스럽게 흘러가도록 만드는 요소를 말합니다. 이러한 디자인은 시각적으로 역동성을 부여하고, 특정 메시지나 키워드를 반복적으로 노출함으로써 사용자의 머릿속에 내용을 각인시키는 데 효과적이에요.  또한, 단순히 텍스트를 흘러가게 만드는 것뿐만 아니라, 브랜드의 슬로건이나 철학을 반복적으로 보여준다면 ..

안녕하세요 찐망고 입니다. 어떤 버튼을 강조하고 싶거나,시선을 자연스럽게 유도하고 싶거나,전체 디자인에 시각적 리듬감을 주고 싶다면 포인트 컬러가 써 볼 수 있는데요. 레이아웃은 주로 중립적인 배경 색상(흰색이나 회색등)을 사용하고,포인트 컬러로 특정 요소(제목, 버튼, 활성화된 카드)만 강조하는 거죠.   포인트 컬러를 선택할 때는 다음의 요소를 고려하는 것이 좋습니다.1. 브랜드 컬러: 포인트 컬러는 보통 브랜드의 주 컬러를 반영하거나, 브랜드의 핵심 이미지를 표현하는 색이 가장 적합합니다. 브랜드 컬러를 포인트 컬러로 사용하면 사용자에게 일관된 인상을 주고, 브랜드 인지도를 높이는 데 도움이 됩니다. 브랜드 컬러는 주로 로고색으로 많이 쓰죠? 2. 보색 대비: 배경 색상과 대비되는 색을 사용하면 시..