Gwni Lab GwniLab

해상도와 래스터화 해상도(Resolution)와 ppi(pixels per Inch) 해상도란 TV, 모니터, 스마트폰 등 디스플레이 장치에서 화면을 이루는 각각의 면이 몇 개의 픽셀로 이루어져 있는가를 나타내는 것입니다. 해상도는 이미지의 가로와 세로에 몇 개의 화소(픽셀)가 있는지를 뜻합니다. 위 이미지를 보면 해상도에 따라 이미지가 다르게 보입니다. 화소(픽셀)가 적은 30x30보다 100x100 해상도에서 더욱 또렷하게 보입니다. 화소(픽셀)가 많으면 많을수록 더 세밀하게 이미지를 표현할 수 있기 때문입니다. 그러나 여기서 문제가 생깁니다. 똑같은 화소(픽셀)의 양이라도 ‘화소(픽셀)의 크기’가 다르다면? 세밀함의 정도가 또 달라 보일 수 있습니다. 그래서 약속의 단위를 만들었는데, 바로 PPI(..

반응형 그리드 시스템 반응형 그리드 시스템이란 최근에는 디바이스 환경에 따라 해상도가 등장하면서 다양한 크기의 해상도를 지원하는 반응형 그리드 시스템이 있습니다. 고정 그리드 시스템과 형태는 비슷하지만, 칼럼의 너비를 고정 값이 아닌 백분율로 지정하고 디바이스 별 브레이크 포인트를 지정하여 화면 크기와 방향에 맞게 레이아웃을 조정합니다. 브레이크 포인트 특정 레이아웃 요구사항이 있는 미리 결정된 화면 크기의 범위입니다. 각 브레이크 포인트 범위는 디스플레이 크기에 따라 칼럼 수와 권장 마진 및 거터를 결정합니다. 브레이크 포인트 지정 방법 1. 해상도 점유율을 통계적인 수치로 검사하여 점유율이 가장 높은 해상도를 선택하여 제작하거나, 일정 비율 이하로 낮은 해상도를 제외하고 제작합니다. 2. 웹사이트 프..

컬러 적용시 주의점 웹접근성에 의한 명도대비 웹접근성이란 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미합니다. 웹접근성에서 ‘적합성 수준’이란 세부 지침들이 갖는 중요도를 3단계로 분류하는 것을 말합니다. 출처 https://www.wah.or.kr:444/Participation/한국형웹콘텐츠접근성지침2.1.pdf https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum 텍스트 콘텐츠의 명도 대비 저시력자 및 색각 이상자, 노인 등 을 위한 웹접근성 가이드에 따라 텍스트 콘텐츠와 배경간의 명도대비는 최소 4.5:1 이상이어야 합니다. 1. 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경..

컬러 사용과 용도 상호작용(interaction) 및 상태표현(state) 컬러는 사용자에게 상호작용 가능성을 안내하는데 가장 강력한 도구입니다. 컨트롤을 할 수 있는 포지션 또는 버튼등의 선택기능영역을 사용자가 인지 가능하도록 컬러를 통해 표현할 수 있으며, 결과적으로 사용자가 원하는 행동(명령)을 실행시킬 수 있도록 도와줍니다. 또한, 컬러는 상태표현을 하는데 있어서도 중요한 역할을 합니다. 사용자의 조작결과에 따른 컨트롤의 상태변경을 컬러로 표현할 수 있으며, 이를 통해 사용자는 컴퓨터가 어떤 명령을 실행중인지 알 수 있습니다. 때에 따라 브랜드컬러, 시스템컬러 모두 적용가능합니다. 토글스위치에 system color, brand color를 사용하여 상태를 나타냅니다. brand color의 활용..

시스템 컬러 시스템 컬러란 시스템 컬러는 상태의 의미를 전달하는 컬러로 사용자에게 직관적으로 시스템의 상태를 알려주는데 효과적 입니다. 웹 접근성적인 측면에서도 아주 필요하다고 볼 수 있습니다. 시스템 컬러의 의미해석 컬러의 해석은 문화나 경험에 의해서 달라질 수 있으나 UNESCO 도로표지판 및 신호에 대한 비엔나협정에서 다음과 같은 색상들의 상태의미를 국제적으로 표준화시켰습니다. 국내에서는 교통관련정보 외에도 UI 디자인(인터페이스 디자인)에 이러한 표준을 사용하여 사용자에게 직관적으로 시스템 상태를 보여줍니다. 일상 속에 녹아 들어있는 색들이죠! 그러나 웹접근성에 따르면 색상으로만 의미를 전달하기보다는 아이콘이나 바와 같은 형태 또는 글을 같이 기재해주는 것이 좋습니다. 이때 모양도 상징적인 의미를..

브랜드 컬러란 브랜드를 나타내는 고유색으로 브랜드 전체의 통일감을 부여하며, 사용자에게 끊임없이 같은 메시지를 전달하기에 효과적입니다. 브랜드 컬러의 활용 브랜드컬러는 주로 primary color 1가지와 secondary color 1가지로 제안합니다. 다수의 컬러를 사용하는 것보다 소수의 컬러를 사용하는것이 브랜드성을 더 끌어올리면서 컨텐츠 중심의 디자인을 하기 쉽도록 도와줍니다. 너무 단조롭게만 느껴진다면 브랜드컬러에 채도와 명도를 더하여 좀 더 풍부한 표현을 할 수 있습니다. 브랜드 컬러의 비율 primary color가 secondary color보다 비율이 높아야 합니다. 이와 반대로 될 시, 사용자에게 주요색에 대한 혼란을 야기시킬 수 있으므로 primary color를 secondary ..