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

안녕하세요 찐망고입니다.오늘은 머터리얼 디자인, 레이아웃과 타이포그래피 관련 포스팅을 해볼게요  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은 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..

안녕하세요 찐망고 입니다. ARIA(Accessible Rich Internet Applications)는 웹 접근성을 개선하기 위해 만들어진 표준입니다.주로 스크린 리더나 기타 보조 기술을 사용하는 사용자들이 웹 콘텐츠를 더 쉽게 이해하고 사용할 수 있도록 도와줍니다. 왜 ARIA가 필요한가?일반적인 HTML 요소는 이미 접근성을 어느 정도 지원합니다. 예를 들어:은 기본적으로 클릭 가능하다는 정보를 보조 기술에 전달합니다.는 alt 속성을 통해 이미지를 설명합니다.하지만, 동적 콘텐츠나 맞춤형 UI 컴포넌트(예: 탭, 드롭다운, 모달 창) 같은 복잡한 요소는 기본 HTML만으로는충분한 접근성을 제공하지 못합니다. 이럴 때 ARIA를 사용하여 접근성을 강화할 수 있습니다. ARIA의 주요 개념ARIA는..

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

안녕하세요 찐망고입니다.오늘은 강조를 뜻하는 인라인요소인 요소와 요소, 요소에 대해 포스팅해볼 건데요.  html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다.브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요.  요소와 , 모두 강조의 의미를 뜻할 때 사용하는 요소인데요.각각 다른 방식으로 강조를 나타내요   요소 요소는 주로 중요한 텍스트의 의미를 나타내는데,해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다.예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다.논리적으로 중요한 텍스트를 강조하죠주의: 이 상품은 ..

안녕하세요 찐망고입니다.해야할 컨텐츠가 산더미인데 일단 이번에 종강하여 면접보는 친구들을 위해 포스팅을 해볼게요. 면접을 보다보면 회사마다 분위기는 다르겠지만일반적으로 물어보는 질문들이 있습니다.테스트를 하는 회사도 존재하구여.포트폴리오 자체를 100% 믿지 않는다는 거죠 ㅎㅎ  물론 질문을 하지 않아도 알고 있어야 하는 내용들도 존재하구요.오늘은 그런 부분과 관련된 포스팅을 해볼게요.  이론적인 질문들 1. 웹표준과 웹접근성에 대해 설명해봐라 웹표준은 크로스브라우징에 맞춰 W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것 웹접근성은 이용자, 이용자의 장비에 관계없이 이용할 수 있는 웹 사이트를 구성하는 것. 시각장애인 등도 이용 할 수 있으며, 여러 PC나 장비에서도 접근 할 수 있는..

안녕하세요 찐망고입니다. 오늘은 웹 접근성 관련 포스팅을 해보려고 합니다. 이전 글도 확인하고 올게요~ 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 웹 접근성에 대해 잘 정의되어있는 사이트의 링크를 걸어볼게요 https://www.w3.org/WAI/fundamentals/accessibility-intro/ko#what 월드 와이드 웹을 창시한 팀 버너스 리는 웹을 “웹의 힘은 보편성에 있으며, 장애에 구애 없이 누구나 손쉽게 접근할 수 있는 공간”으로 정의했다. 또한, W3C에서 만든 웹 접근성 이니셔티브(WAI : Web Accessibility Initiative)에 따르면..

안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서.. 기본적인 것에 대해 접근을 해보도록 하겠습니다. 그중 첫 번째는 웹 표준 그러니까 크로스 브라우징에 관련된 포스팅입니다. 일단 웹 표준을 말하기 전에 브라우저에 대해 이야길 해봐야 하는데요. 제가 수업시간에 자주 접속하는 사이트가 하나 있어요 https://gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Sear..