<div id="readability-page-1" class="page"><article><header><small>Created: 2020, 05 18 &gt;<a href="https://github.com/shdkej/shdkej.github.io/blame/master/content/Design.md">Updated: 2021, 05 20</a></small></header><nav><strong>Table of Contents</strong><div><ul>
<li>
<p><a href="/design/#basic">basic</a></p>
<ul>
<li>
<ul>
<li><a href="/design/#%EC%A0%91%EA%B7%BC%EC%84%B1-%EC%B1%99%EA%B8%B0%EA%B8%B0">접근성 챙기기</a></li>
<li><a href="/design/#%EC%8A%A4%ED%81%AC%EB%A6%B0%EB%A6%AC%EB%8D%94%EA%B0%80-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98%EC%9D%84-%EC%9D%BD%EC%A7%80-%EC%95%8A%EB%8F%84%EB%A1%9D-%ED%95%B4%EC%95%BC%ED%95%9C%EB%8B%A4">스크린리더가 네비게이션을 읽지 않도록 해야한다</a></li>
<li><a href="/design/#%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A1%9C-%EB%A7%8C%EB%93%A0-%EB%A7%81%ED%81%AC-%EC%9E%90%EC%B2%B4%EA%B0%80-%EC%9D%98%EB%AF%B8%EA%B0%80-%EA%B0%80%EC%A7%80%EA%B2%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A4">텍스트로 만든 링크 자체가 의미가 가지게 만들어야 한다</a></li>
<li><a href="/design/#%EC%BB%AC%EB%9F%AC%EB%A7%8C%EC%9C%BC%EB%A1%9C-%EC%9D%98%EB%AF%B8%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%A0%A4%EA%B3%A0-%ED%95%98%EB%A9%B4-%EC%83%89%EB%A7%B9%EC%97%90%EA%B2%8C-%EB%B6%88%ED%8E%B8%ED%95%98%EB%8B%A4">컬러만으로 의미를 전달하려고 하면 색맹에게 불편하다</a></li>
<li><a href="/design/#%EA%B8%80%EC%9E%90%EB%A7%88%ED%81%AC%EA%B8%80%EC%9E%90%EB%A1%9C-%EB%90%98%EC%96%B4%EC%9E%88%EB%8A%94-%EB%A9%94%EB%89%B4-%EA%B0%80%EB%B2%BC%EC%9A%B4-%EA%B7%B8%EB%A6%BC%EC%9C%BC%EB%A1%9C-%ED%91%9C%EC%8B%9C%ED%95%98%EB%8A%94%EA%B2%8C-%EA%B5%AD%EA%B0%80-%EC%83%81%EA%B4%80%EC%97%86%EC%9D%B4-%EC%9D%B4%ED%95%B4%ED%95%A0-%EC%88%98-%EC%9E%88%EA%B2%A0%EB%8B%A4">글자마크(글자로 되어있는 메뉴) 가벼운 그림으로 표시하는게 국가 상관없이 이해할 수 있겠다</a></li>
<li><a href="/design/#typography">Typography</a></li>
<li><a href="/design/#should-have-make-fail-return-button">Should have make fail return button</a></li>
<li><a href="/design/#%EB%AA%A9%EB%A1%9D-%EC%B0%BD%EC%97%90%EC%84%9C-%ED%8E%98%EC%9D%B4%EC%A7%95%EA%B3%BC-%EC%9E%90%EB%8F%99-%EB%A1%9C%EB%94%A9%EA%B8%B0%EB%8A%A5-%ED%95%84%EC%9A%94">목록 창에서 페이징과 자동 로딩기능 필요</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/design/#color">Color</a></li>
<li><a href="/design/#font">Font</a></li>
<li><a href="/design/#darkmode">Darkmode</a></li>
<li><a href="/design/#video">[Video]</a></li>
<li>
<p><a href="/design/#in-web">in WEB</a></p>
<ul>
<li>
<ul>
<li><a href="/design/#what-is-good">what is good?</a></li>
<li><a href="/design/#side-toc-convert-size">side toc convert size</a></li>
<li><a href="/design/#anchor-offset">anchor offset</a></li>
<li><a href="/design/#font-size">font-size</a></li>
<li><a href="/design/#%EA%B7%B8%EB%A6%BC-%EC%86%8D-%EC%83%89%EA%B9%94">그림 속 색깔</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/design/#reference">Reference</a></li>
</ul></div></nav><p>---</p><section><h2 id="basic"><a href="#basic" aria-label="basic permalink"></a>basic</h2>
<h4 id="접근성-챙기기"><a href="#%EC%A0%91%EA%B7%BC%EC%84%B1-%EC%B1%99%EA%B8%B0%EA%B8%B0" aria-label="접근성 챙기기 permalink"></a>접근성 챙기기</h4>
<p>인터넷 상에서는 장애인과 비장애인의 경계가 없다 (커뮤니케이션에 있어서),
접근성 기능이 제한되어 있다면 아예 접근할 수가 없게 된다.
접근성은 최소기능이 아니라 필수기능이어야 한다.
벽이 아니라 다리가되고, 다리보다는 평평한 길이 되어야 한다.</p>
<ul>
<li><a href="https://jigsaw.w3.org/css-validator/">W3C 접근성 검사기</a></li>
<li><a href="https://wave.webaim.org/">WAVE 접근성 검사기</a></li>
<li><a href="https://nuli.navercorp.com/education/disabilityType">네이버 접근성 센터</a></li>
<li><a href="https://app.contrast-finder.org/?lang=ko">명암비 조합 파인더</a></li>
<li><a href="http://web-accessibility.carnegiemuseums.org/code/navigation/">웹 접근성 가이드라인</a></li>
</ul>
<h4 id="스크린리더가-네비게이션을-읽지-않도록-해야한다"><a href="#%EC%8A%A4%ED%81%AC%EB%A6%B0%EB%A6%AC%EB%8D%94%EA%B0%80-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98%EC%9D%84-%EC%9D%BD%EC%A7%80-%EC%95%8A%EB%8F%84%EB%A1%9D-%ED%95%B4%EC%95%BC%ED%95%9C%EB%8B%A4" aria-label="스크린리더가 네비게이션을 읽지 않도록 해야한다 permalink"></a>스크린리더가 네비게이션을 읽지 않도록 해야한다</h4>
<h4 id="텍스트로-만든-링크-자체가-의미가-가지게-만들어야-한다"><a href="#%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A1%9C-%EB%A7%8C%EB%93%A0-%EB%A7%81%ED%81%AC-%EC%9E%90%EC%B2%B4%EA%B0%80-%EC%9D%98%EB%AF%B8%EA%B0%80-%EA%B0%80%EC%A7%80%EA%B2%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A4" aria-label="텍스트로 만든 링크 자체가 의미가 가지게 만들어야 한다 permalink"></a>텍스트로 만든 링크 자체가 의미가 가지게 만들어야 한다</h4>
<h4 id="컬러만으로-의미를-전달하려고-하면-색맹에게-불편하다"><a href="#%EC%BB%AC%EB%9F%AC%EB%A7%8C%EC%9C%BC%EB%A1%9C-%EC%9D%98%EB%AF%B8%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%A0%A4%EA%B3%A0-%ED%95%98%EB%A9%B4-%EC%83%89%EB%A7%B9%EC%97%90%EA%B2%8C-%EB%B6%88%ED%8E%B8%ED%95%98%EB%8B%A4" aria-label="컬러만으로 의미를 전달하려고 하면 색맹에게 불편하다 permalink"></a>컬러만으로 의미를 전달하려고 하면 색맹에게 불편하다</h4>
<h4 id="글자마크글자로-되어있는-메뉴-가벼운-그림으로-표시하는게-국가-상관없이-이해할-수-있겠다"><a href="#%EA%B8%80%EC%9E%90%EB%A7%88%ED%81%AC%EA%B8%80%EC%9E%90%EB%A1%9C-%EB%90%98%EC%96%B4%EC%9E%88%EB%8A%94-%EB%A9%94%EB%89%B4-%EA%B0%80%EB%B2%BC%EC%9A%B4-%EA%B7%B8%EB%A6%BC%EC%9C%BC%EB%A1%9C-%ED%91%9C%EC%8B%9C%ED%95%98%EB%8A%94%EA%B2%8C-%EA%B5%AD%EA%B0%80-%EC%83%81%EA%B4%80%EC%97%86%EC%9D%B4-%EC%9D%B4%ED%95%B4%ED%95%A0-%EC%88%98-%EC%9E%88%EA%B2%A0%EB%8B%A4" aria-label="글자마크글자로 되어있는 메뉴 가벼운 그림으로 표시하는게 국가 상관없이 이해할 수 있겠다 permalink"></a>글자마크(글자로 되어있는 메뉴) 가벼운 그림으로 표시하는게 국가 상관없이 이해할 수 있겠다</h4>
<h4 id="typography"><a href="#typography" aria-label="typography permalink"></a>Typography</h4>
<h4 id="should-have-make-fail-return-button"><a href="#should-have-make-fail-return-button" aria-label="should have make fail return button permalink"></a>Should have make fail return button</h4>
<h4 id="목록-창에서-페이징과-자동-로딩기능-필요"><a href="#%EB%AA%A9%EB%A1%9D-%EC%B0%BD%EC%97%90%EC%84%9C-%ED%8E%98%EC%9D%B4%EC%A7%95%EA%B3%BC-%EC%9E%90%EB%8F%99-%EB%A1%9C%EB%94%A9%EA%B8%B0%EB%8A%A5-%ED%95%84%EC%9A%94" aria-label="목록 창에서 페이징과 자동 로딩기능 필요 permalink"></a>목록 창에서 페이징과 자동 로딩기능 필요</h4>
<h2 id="color"><a href="#color" aria-label="color permalink"></a>Color</h2>
<p>텔레비전 모니터나 조명 등에서, 다른 색의 불빛을 겹쳐 새로운 색을 만드는 가산혼합의 삼원색은, 통상 빨강·초록·파랑의 삼색이다.
그림물감 혼합, 칼라 인쇄로 색 잉크 감산혼합의 경우의 삼원색은, 시안, 마젠타·노랑이다.
</p><div>


<picture>
<source srcset="/static/f9f6432651810b4c121cf9bd85ac7298/e07e9/origin_color.jpg 200w,
/static/f9f6432651810b4c121cf9bd85ac7298/066f9/origin_color.jpg 400w,
/static/f9f6432651810b4c121cf9bd85ac7298/f1bff/origin_color.jpg 515w">
<img src="https://shdkej.com/static/f9f6432651810b4c121cf9bd85ac7298/f1bff/origin_color.jpg" title="Color" alt="Color" loading="lazy">
</picture>
</div>

<p>가산혼합</p>
<ul>
<li>빨강	#FF0000</li>
<li>초록	#00FF00</li>
<li>파랑	#0000FF</li>
</ul>
<p>감산혼합</p>
<ul>
<li>시안	#00FFFF</li>
<li>마젠타 #FF00FF</li>
<li>노랑	#FFFF00</li>
</ul>
<h2 id="font"><a href="#font" aria-label="font permalink"></a>Font</h2>
<p>굴림은 산세리프. 꽉 찬 글씨. 둥글둥글한 글씨
한글에서는 구리게 보인다
똑같은 자음의 크기가 글자마다 달라진다
가상의 동일한 사각형 안에 꽉꽉 채워 넣으려고 해서 글자 간격이 멀어진다
마이크로소프트가 기본글꼴로 지정했었다
기본글꼴이어서 너무 자주보는 것도 문제다.
2008년 이후 윈도우 기본글꼴이 맑은 고딕이 되었다.
복고 느낌, 가독성이 높다고 볼 수도 있다. 큼직큼직해서</p>
<ul>
<li><a href="https://css-tricks.com/snippets/css/system-font-stack/">What are those system fonts?</a></li>
</ul>
<h2 id="darkmode"><a href="#darkmode" aria-label="darkmode permalink"></a>Darkmode</h2>
<ul>
<li>Don't use a perfect black</li>
<li>low 채도(Saturation), 명도(Brightness)</li>
<li>text, background contrast ratio minimum 15.1:1</li>
<li>depth, visual hierarchy</li>
<li><code>background: #000; color: #fff;</code></li>
</ul>
<h2 id="video"><a href="#video" aria-label="video permalink"></a></h2></section><section>
<h2 id="in-web"><a href="#in-web" aria-label="in web permalink"></a>in WEB</h2>
<h4 id="what-is-good"><a href="#what-is-good" aria-label="what is good permalink"></a>what is good?</h4>
<ul>
<li>round vs non-round</li>
<li>shadow</li>
<li>font-size</li>
</ul>
<h4 id="side-toc-convert-size"><a href="#side-toc-convert-size" aria-label="side toc convert size permalink"></a>side toc convert size</h4>
<p>15" full-size 1900 half-size 950
content full-size 1170
middle-size 750
mobile-size 780</p>
<p>gitlab convert line 990
subicura convert line 1100
evan moon convert line 770</p>
<p>i want when 15" monitor half size view is ... index view is better?
--&gt; toc size 20%, screen &lt; 1200</p>
<h4 id="anchor-offset"><a href="#anchor-offset" aria-label="anchor offset permalink"></a>anchor offset</h4>
<pre><code>:target::before {
 content: '';
 display: block;
 height:  180px;
 margin-top: -180px;
}
</code></pre>
<ul>
<li><a href="https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header">https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header</a></li>
</ul>
<h4 id="font-size"><a href="#font-size" aria-label="font size permalink"></a>font-size</h4>
<p>font-size 19 &lt; x &lt; 28
medium 21px mobile:18px
brunch</p>
<ul>
<li>line-height</li>
</ul>
<h4 id="그림-속-색깔"><a href="#%EA%B7%B8%EB%A6%BC-%EC%86%8D-%EC%83%89%EA%B9%94" aria-label="그림 속 색깔 permalink"></a>그림 속 색깔</h4>
<p>무채색 속 하나의 유채색을 집어넣으면 색이 더 부각되고 멋져보인다</p>
<h2 id="reference"><a href="#reference" aria-label="reference permalink"></a>Reference</h2>
<ul>
<li><a href="https://csslayout.io/patterns/">https://csslayout.io/patterns/</a></li>
<li><a href="https://medium.com/guleum/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%84-%EA%B5%AC%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-beefa8214884">디자인 시스템을 구성하는 방법</a></li>
<li><a href="https://brunch.co.kr/@shaun/40">디자인 시각적 요소들</a></li>
<li><a href="https://wit.nts-corp.com/2017/02/13/4258">웹폰트</a></li>
</ul></section><hr></article></div>

shdkej

basic
접근성 챙기기
인터넷 상에서는 장애인과 비장애인의 경계가 없다 (커뮤니케이션에 있어서),
접근성 기능이 제한되어 있다면 아예 접근할 수가 없게 된다.
접근성은 최소기능이 아니라 필수기능이어야 한다.
벽이 아니라 다리가되고, 다리보다는 평평한 길이 되어야 한다.
W3C 접근성 검사기
WAVE 접근성 검사기
네이버 접근성 센터
명암비 조합 파인더
웹 접근성 가이드라인
스크린리더가 네비게이션을 읽지 않도록 해야한다
텍스트로 만든 링크 자체가 의미가 가지게 만들어야 한다
컬러만으로 의미를 전달하려고 하면 색맹에게 불편하다
글자마크(글자로 되어있는 메뉴) 가벼운 그림으로 표시하는게 국가 상관없이 이해할 수 있겠다
Typography
Should have make fail return button
목록 창에서 페이징과 자동 로딩기능 필요
Color
텔레비전 모니터나 조명 등에서, 다른 색의 불빛을 겹쳐 새로운 색을 만드는 가산혼합의 삼원색은, 통상 빨강·초록·파랑의 삼색이다.
그림물감 혼합, 칼라 인쇄로 색 잉크 감산혼합의 경우의 삼원색은, 시안, 마젠타·노랑이다.
      
      
        
          
        
        
      
      
    
    
가산혼합
빨강	#FF0000
초록	#00FF00
파랑	#0000FF
감산혼합
시안	#00FFFF
마젠타 #FF00FF
노랑	#FFFF00
Font
굴림은 산세리프. 꽉 찬 글씨. 둥글둥글한 글씨
한글에서는 구리게 보인다
똑같은 자음의 크기가 글자마다 달라진다
가상의 동일한 사각형 안에 꽉꽉 채워 넣으려고 해서 글자 간격이 멀어진다
마이크로소프트가 기본글꼴로 지정했었다
기본글꼴이어서 너무 자주보는 것도 문제다.
2008년 이후 윈도우 기본글꼴이 맑은 고딕이 되었다.
복고 느낌, 가독성이 높다고 볼 수도 있다. 큼직큼직해서
What are those system fonts?
Darkmode
Don't use a perfect black
low 채도(Saturation), 명도(Brightness)
text, background contrast ratio minimum 15.1:1
depth, visual hierarchy
background: #000; color: #fff;
[[Video]]
in WEB
what is good?
round vs non-round
shadow
font-size
side toc convert size
15" full-size 1900 half-size 950
content full-size 1170
middle-size 750
mobile-size 780
gitlab convert line 990
subicura convert line 1100
evan moon convert line 770
i want when 15" monitor half size view is ... index view is better?
--> toc size 20%, screen < 1200
anchor offset
:target::before {
 content: '';
 display: block;
 height:  180px;
 margin-top: -180px;
}
https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
font-size
font-size 19 < x < 28
medium 21px mobile:18px
brunch
line-height
그림 속 색깔
무채색 속 하나의 유채색을 집어넣으면 색이 더 부각되고 멋져보인다
Reference
https://csslayout.io/patterns/
디자인 시스템을 구성하는 방법
디자인 시각적 요소들
웹폰트

Design

댓글