<img src="https://velog.velcdn.com/images/gkfla668/post/f168ad04-ae5e-469f-bd1b-f44fdb27a491/image.png" alt="">
<blockquote>
<a href="https://2024.stateofcss.com/ko-KR/awards/">https://2024.stateofcss.com/ko-KR/awards/</a>
</blockquote>
웹 디자인이 빠르게 진화하면서, CSS는 인터페이스를 더욱 풍부하고 상호작용이 가능한 형태로 꾸밀 수 있는 다양한 속성들을 제공하고 있습니다. 특히, 올해는 UI와 UX를 개선할 수 있는 새로운 CSS 속성들이 각광받으며 웹 디자이너와 개발자들 사이에서 널리 사용되었습니다. 
이번 포스팅에서는 2024년 가장 많이 사용된 CSS 속성 TOP 3를 소개하고, 각 속성이 웹 디자인에 어떤 영향을 주었는지 살펴보겠습니다! 🎨
<h3 id="1-css-filter-effects-754">1. CSS Filter Effects (75.4%)</h3>
<blockquote>
CSS의 filter 속성은 요소에 그래픽 효과를 적용해 시각적 스타일을 변경할 수 있도록 합니다. 이 속성은 이미지, 텍스트, 배경 등에 블러 효과, 색상 변환, 밝기 조절 등 여러 가지 필터를 적용할 수 있어 웹 인터페이스에 시각적 매력을 더할 때 자주 사용됩니다.
</blockquote>
<h4 id="지원하는-주요-함수들">지원하는 주요 함수들</h4>
<blockquote>
blur(): 요소에 블러 효과(흐림)를 추가합니다. 예: blur(5px)
brightness(): 요소의 밝기를 조절합니다. 예: brightness(150%)
contrast(): 요소의 대비를 조절합니다. 예: contrast(200%)
grayscale(): 요소를 흑백으로 변환합니다. 예: grayscale(100%)
invert(): 색상을 반전시킵니다. 예: invert(100%)
opacity(): 투명도를 설정합니다. 예: opacity(50%)
saturate(): 요소의 채도를 조정합니다. 예: saturate(300%)
sepia(): 요소에 세피아 톤을 적용합니다. 예: sepia(100%)
</blockquote>
위 속성들은 단순한 시각 효과를 통해 사용자의 관심을 끌거나, 인터페이스의 시각적 계층을 개선하는 데 효과적입니다.
🎯 여러 필터를 공백으로 구분하여 동시에 적용할 수 있습니다.
<pre><code class="language-javascript">filter: brightness(150%) contrast(120%) blur(2px);</code></pre>
<pre><code class="language-javascript">img {
 filter: grayscale(100%) blur(5px);
}</code></pre>
위 코드에서는 이미지를 흑백으로 바꾸고 흐림 효과를 추가합니다.
<h3 id="2-has-728">2. :has() (72.8%)</h3>
<blockquote>
<code>:has()</code>는 동적 부모 선택자로, 특정 조건을 충족하는 자식 요소가 존재할 때 부모 요소에 스타일을 적용할 수 있게 해줍니다. 기존 CSS는 자식 요소를 기준으로 스타일을 설정할 수 있었는데, <code>:has()</code>는 부모 요소가 자식을 조건으로 스타일을 변경할 수 있는 기능을 제공합니다. 예를 들어, 특정 자식을 포함하는 부모에만 스타일을 적용하거나 상태 기반의 스타일을 만들 수 있습니다.
</blockquote>
<pre><code class="language-javascript">/* 자식 요소로 img를 포함한 figure에만 스타일을 적용 */
figure:has(img) {
 border: 2px solid blue;
}</code></pre>
위 코드는 img를 포함한 figure 요소에만 파란색 테두리를 적용합니다.
<pre><code class="language-javascript">/* .parent 요소에 .child 요소가 있을 경우 .parent에 스타일 적용 */
.parent:has(.child) {
 background-color: lightgray;
}</code></pre>
<code>:has()</code> 선택자는 주로 상태 기반 스타일링이나 동적 스타일링에서 강력하며, 특정 자식을 포함하는 부모에게 직접적인 스타일을 적용할 수 있어 더 복잡한 레이아웃이나 UI 구성에 유용하게 쓰입니다.
<h3 id="3-intrinsinc-sizing-keywords-725">3. Intrinsinc Sizing Keywords (72.5%)</h3>
<blockquote>
<code>min-content</code>는 CSS에서 요소의 최소 크기를 계산할 때 사용하는 키워드입니다. 요소의 크기를 min-content로 설정하면, 그 요소가 담고 있는 콘텐츠의 가장 작은 크기에 맞춰 요소의 폭이나 높이가 자동으로 조정되며, 주로 긴 텍스트가 줄 바꿈 없이 표시되도록 할 때 유용합니다.
</blockquote>
*적용 대상
*<code>min-content</code>는 width, height, min-width, min-height, max-width, max-height 속성 등에 적용할 수 있습니다.
이 속성은 반응형 웹 디자인과 적응형 레이아웃을 구현할 때 특히 유용하며, 웹 콘텐츠의 길이나 크기에 따라 자동으로 레이아웃이 조정됩니다.

https://2024.stateofcss.com/ko-KR/awards/
웹 디자인이 빠르게 진화하면서, CSS는 인터페이스를 더욱 풍부하고 상호작용이 가능한 형태로 꾸밀 수 있는 다양한 속성들을 제공하고 있습니다. 특히, 올해는 UI와 UX를 개선할 수 있는 새로운 CSS 속성들이 각광받으며 웹 디자이너와 개발자들 사이에서 널리 사용되었습니다. 
이번 포스팅에서는 2024년 가장 많이 사용된 CSS 속성 TOP 3를 소개하고, 각 속성이 웹 디자인에 어떤 영향을 주었는지 살펴보겠습니다! 🎨
1. CSS Filter Effects (75.4%)
CSS의 filter 속성은 요소에 그래픽 효과를 적용해 시각적 스타일을 변경할 수 있도록 합니다. 이 속성은 이미지, 텍스트, 배경 등에 블러 효과, 색상 변환, 밝기 조절 등 여러 가지 필터를 적용할 수 있어 웹 인터페이스에 시각적 매력을 더할 때 자주 사용됩니다.
지원하는 주요 함수들
blur(): 요소에 블러 효과(흐림)를 추가합니다. 예: blur(5px)
brightness(): 요소의 밝기를 조절합니다. 예: brightness(150%)
contrast(): 요소의 대비를 조절합니다. 예: contrast(200%)
grayscale(): 요소를 흑백으로 변환합니다. 예: grayscale(100%)
invert(): 색상을 반전시킵니다. 예: invert(100%)
opacity(): 투명도를 설정합니다. 예: opacity(50%)
saturate(): 요소의 채도를 조정합니다. 예: saturate(300%)
sepia(): 요소에 세피아 톤을 적용합니다. 예: sepia(100%)
위 속성들은 단순한 시각 효과를 통해 사용자의 관심을 끌거나, 인터페이스의 시각적 계층을 개선하는 데 효과적입니다.
🎯 여러 필터를 공백으로 구분하여 동시에 적용할 수 있습니다.
filter: brightness(150%) contrast(120%) blur(2px);
img {
  filter: grayscale(100%) blur(5px);
}
위 코드에서는 이미지를 흑백으로 바꾸고 흐림 효과를 추가합니다.
2. :has() (72.8%)
:has()는 동적 부모 선택자로, 특정 조건을 충족하는 자식 요소가 존재할 때 부모 요소에 스타일을 적용할 수 있게 해줍니다. 기존 CSS는 자식 요소를 기준으로 스타일을 설정할 수 있었는데, :has()는 부모 요소가 자식을 조건으로 스타일을 변경할 수 있는 기능을 제공합니다. 예를 들어, 특정 자식을 포함하는 부모에만 스타일을 적용하거나 상태 기반의 스타일을 만들 수 있습니다.
/* 자식 요소로 img를 포함한 figure에만 스타일을 적용 */
figure:has(img) {
  border: 2px solid blue;
}
위 코드는 img를 포함한 figure 요소에만 파란색 테두리를 적용합니다.
/* .parent 요소에 .child 요소가 있을 경우 .parent에 스타일 적용 */
.parent:has(.child) {
  background-color: lightgray;
}
:has() 선택자는 주로 상태 기반 스타일링이나 동적 스타일링에서 강력하며, 특정 자식을 포함하는 부모에게 직접적인 스타일을 적용할 수 있어 더 복잡한 레이아웃이나 UI 구성에 유용하게 쓰입니다.
3. Intrinsinc Sizing Keywords (72.5%)
min-content는 CSS에서 요소의 최소 크기를 계산할 때 사용하는 키워드입니다. 요소의 크기를 min-content로 설정하면, 그 요소가 담고 있는 콘텐츠의 가장 작은 크기에 맞춰 요소의 폭이나 높이가 자동으로 조정되며, 주로 긴 텍스트가 줄 바꿈 없이 표시되도록 할 때 유용합니다.
*적용 대상
*min-content는 width, height, min-width, min-height, max-width, max-height 속성 등에 적용할 수 있습니다.
이 속성은 반응형 웹 디자인과 적응형 레이아웃을 구현할 때 특히 유용하며, 웹 콘텐츠의 길이나 크기에 따라 자동으로 레이아웃이 조정됩니다.

올해 가장 많이 사용된 CSS 속성은 무엇일까? 🎨 

<img src="https://velog.velcdn.com/images/gkfla668/post/b8d8aa01-0604-4f70-892a-a3174eb5c516/image.png" alt="">
<blockquote>
평소 UX/UI 개선에 관심은 많았지만, 객관적인 지표에 기반하여 개선하고자 하지는 못했던 것 같다. 그냥 사용자 입장에서 어떻게 느낄지 계속해서 생각해보고 개선하려고 했던 정도? 
이번 기회를 통해서 법칙을 기반으로 UX/UI를 어떻게 개선하면 좋을지 알아보면 좋을 것 같아서 글로 정리해보려고 한다.
</blockquote>
<hr>
<h3 id="제이콥의-법칙">제이콥의 법칙</h3>
사용자는 본인이 오래 사용하면서 축적된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다. 
따라서, 이 법칙은 일반적인 디자인 관습을 따를 것을 권장한다. 사용자의 축적된 경험을 이용해야 한다는 것이다. 
<img src="https://velog.velcdn.com/images/gkfla668/post/af10be8d-e5e0-489f-a2bf-df51e10fa67e/image.png" alt="">
<blockquote>
<h4 id="멘탈-모델이란">멘탈 모델이란?</h4>
우리가 어떤 시스템에 관해 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 바를 의미합니다. 우리는 항상 새로운 것을 접할 때 과거의 경험으로 쌓은 지식을 바탕으로 새로운 대상과 상호작용합니다. 즉, 기존의 경험을 활용한다면 새로운 시스템의 작동 방식을 이해하는데 필요한 인지적 노력을 줄일 수 있을 것 입니다. 다시 말해, 디자인을 사용자의 멘탈 모델에 맞추면 사용자 경험이 개선된다고 할 수 있습니다. 
</blockquote>
💡 핵심은 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용하자는 것이다. 
<h3 id="피츠의-법칙">피츠의 법칙</h3>
목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.
온라인에서 이 법칙이 꽤 자주 무시되고 있다고 한다. 버튼이 너무 작거나 엉뚱한 위치에 있는 것이 대표적인 예이다. 그런 버튼을 정확하게 조준하거나 사격하는데 걸리는 시간은 늘어나기 마련이고, 이 과정에서 반드시 사용자는 에너지를 소비하게 될 것이다. 
🚨 즉, 사용자가 목표에 도달하기까지 소모하는 에너지의 총량이 증가한다는 것이다. 
💡 그럼 이를 어떻게 따라야 할까?
<ol>
<li>터치 대상의 크기는 사용자가 쉽게 조준할 수 있을 정도로 충분히 커야 한다.<img src="https://velog.velcdn.com/images/gkfla668/post/8beb1c33-dc40-4b92-9354-dcfd6f69f873/image.png" width="400" ></li>
<li>터치 대상 사이에 충분한 거리를 확보해야 한다. </li>
<li>터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다. (터치하기 선호하는 영역은 화면 중앙부라고 한다. 정확도도 중앙부에서 가장 높다고 한다.)</li>
</ol>
<h3 id="힉의-법칙">힉의 법칙</h3>
선택지가 너무 많으면 인지 부하가 증가한다.
의사 결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
💡 필터 기능을 활용하여 원하는 조건의 상품만 보거나, 원하지 않는 조건의 상품은 걸러내는 방식으로 소화해야 할 정보량을 줄이고 사용자가 원하는 상품에 더 쉽고 빠르게 도달할 수 있다.
<h3 id="밀러의-법칙">밀러의 법칙</h3>
보통 사람이 한번에 기억할 수 있는 항목은 최대 7(+-2)개 정도로 제한된다고 한다.
💡 특정 정보를 제공할 때, 7개 이하 되도록 5개 이하로 제공하는 것이 좋다. 비슷한 부류의 정보들을 묶어서 표현하면 조금 더 가독성 있게 보여줄 수 있다. 
<h3 id="포스텔의-법칙">포스텔의 법칙</h3>
유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
이 법칙의 대표적인 사례는 &#39;입력 폼&#39; 이다. 폼은 본질적으로 사용자가 서비스와 인터랙션하는 수단이기에 입력하는 정보의 양이 증가할수록 사용자에게 부과되는 인지적 에너지와 노력이 커지게 되어 사용자가 입력 폼을 다 채울 확률이 낮아질 것이다.
💡 
<ol>
<li>사용자에게 요구하는 정보를 최소한으로, 제한적으로 요청한다. </li>
<li>또 다른 예시로, 사용자가 &#39;20241018&#39;만 입력해도 자동으로 2024-10-18 형식으로 변환되는 UX가 있다. </li>
<li>사용자의 실수를 파악하여 텍스트나 alert을 통해 피드백을 제공하여 사용자가 실수를 수정할 수 있게 도와야 한다.</li>
</ol>
<h3 id="피크엔드의-법칙">피크엔드의 법칙</h3>
사용자 경험은 평균이나 합계가 아니라 절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단된다. &#39;실패했던 경험&#39;은 더 오래 기억하려는 경향이 있다.
💡 따라서, 이러한 순간에도 최대한 부드럽고 재치있게 표현해줘야 한다. 
<img src="https://velog.velcdn.com/images/gkfla668/post/2cfaca36-775c-4d2b-86c9-fb8cdc532d0c/image.png" alt="">
<h3 id="테슬러의-법칙">테슬러의 법칙</h3>
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
이 법칙은 글로 이해하기 어려울 것 같아, 토스 앱의 스크린샷을 가져왔다.
<img src="https://velog.velcdn.com/images/gkfla668/post/2088eb65-575d-4ab6-98a8-d153c87c7b1e/image.jpg" width="200" > 토스는 사용자가 계좌번호를 입력하면 해당 계좌번호에서 은행별 계좌번호 고유의 패턴을 파악해서 &#39;은행 선택&#39; 드롭다운 아래에 추천 은행명 버튼을 표시해준다. 이를 통해 드롭다운으로 일일이 은행명을 찾지 않아도 되는 편리함을 제공하고 있다.
💡 즉, 아무리 단순하게 사용자 경험을 제공해 주려고 노력한다고 하더라고 복잡성을 줄일 수 있는데는 분명 한계가 있는데, 이때에는 그 복잡성을 사용자 대신 행해주는 방식으로 제공해야 한다는 것입니다. 
<h3 id="심미적-사용성-효과">심미적 사용성 효과</h3>
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
시각적으로 만족스러운 디자인은 사용성 문제를 가려 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다. 
<h3 id="폰-레스토프-효과">폰 레스토프 효과</h3>
비슷한 사물이 여러 개 있으면 그중 가장 색다른 것만 기억한다. 
💡 
<ol>
<li>특정 기능을 강조하거나 유도하기 위해 진한 컬러, 보색 컬러를 사용한다.</li>
<li>필수 입력 필드에는 Required 표시를 통해 사용자가 중요한 정보를 놓치지 않도록 해야 한다.</li>
</ol>
<del>🚨 그렇다고 너무 많은 부분을 강조하면 사용자가 필요한 정보를 한눈에 찾을 수 없게 되므로 주의!</del>
<h3 id="도허티-임계">도허티 임계</h3>
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다. 
사용자가 원하는 정보를 딜레이 없이 바로 보여주면 좋겠지만, 외부 정보를 불러온다면 어쩔 수 없는 딜레이가 발생한다. 
💡 보통 이런 딜레이를 스켈레톤 UI, 로딩 애니메이션 등을 통해 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소해줄 수 있다.
<img src="https://velog.velcdn.com/images/gkfla668/post/2fb4276c-ed7b-4afe-808a-a3f50d272c75/image.png" width="400" ><img src="https://velog.velcdn.com/images/gkfla668/post/566f22fe-5988-41be-943a-107f0b3a3efc/image.png" width="400" >
<hr>
참고문헌
<ul>
<li><a href="https://search.shopping.naver.com/book/catalog/32441511954?cat_id=50010881&amp;frm=PBOKPRO&amp;query=UX%2FUI%EC%9D%98+10%EA%B0%80%EC%A7%80+%EC%8B%AC%EB%A6%AC%ED%95%99+%EB%B2%95%EC%B9%99&amp;NaPm=ct%3Dl8iw0s3k%7Cci%3Dc954b83516f1e1069b90f16ee0e09b01d25f5196%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3D53f1cb9f5eba42e11957537bef75b14e60bf661f">책 &#39;UX/UI의 10가지 심리학 법칙&#39;(존 야블론스키 저)</a></li>
<li><a href="https://brunch.co.kr/@chadwick/33">토스에서 찾아본 10가지 UX 법칙</a></li>
</ul>

평소 UX/UI 개선에 관심은 많았지만, 객관적인 지표에 기반하여 개선하고자 하지는 못했던 것 같다. 그냥 사용자 입장에서 어떻게 느낄지 계속해서 생각해보고 개선하려고 했던 정도? 
이번 기회를 통해서 법칙을 기반으로 UX/UI를 어떻게 개선하면 좋을지 알아보면 좋을 것 같아서 글로 정리해보려고 한다.
제이콥의 법칙
사용자는 본인이 오래 사용하면서 축적된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다. 
따라서, 이 법칙은 일반적인 디자인 관습을 따를 것을 권장한다. 사용자의 축적된 경험을 이용해야 한다는 것이다. 

멘탈 모델이란?
우리가 어떤 시스템에 관해 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 바를 의미합니다. 우리는 항상 새로운 것을 접할 때 과거의 경험으로 쌓은 지식을 바탕으로 새로운 대상과 상호작용합니다. 즉, 기존의 경험을 활용한다면 새로운 시스템의 작동 방식을 이해하는데 필요한 인지적 노력을 줄일 수 있을 것 입니다. 다시 말해, 디자인을 사용자의 멘탈 모델에 맞추면 사용자 경험이 개선된다고 할 수 있습니다. 
💡 핵심은 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용하자는 것이다. 
피츠의 법칙
목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.
온라인에서 이 법칙이 꽤 자주 무시되고 있다고 한다. 버튼이 너무 작거나 엉뚱한 위치에 있는 것이 대표적인 예이다. 그런 버튼을 정확하게 조준하거나 사격하는데 걸리는 시간은 늘어나기 마련이고, 이 과정에서 반드시 사용자는 에너지를 소비하게 될 것이다. 
🚨 즉, 사용자가 목표에 도달하기까지 소모하는 에너지의 총량이 증가한다는 것이다. 
💡 그럼 이를 어떻게 따라야 할까?
터치 대상의 크기는 사용자가 쉽게 조준할 수 있을 정도로 충분히 커야 한다.
터치 대상 사이에 충분한 거리를 확보해야 한다. 
터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다. (터치하기 선호하는 영역은 화면 중앙부라고 한다. 정확도도 중앙부에서 가장 높다고 한다.)
힉의 법칙
선택지가 너무 많으면 인지 부하가 증가한다.
의사 결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
💡 필터 기능을 활용하여 원하는 조건의 상품만 보거나, 원하지 않는 조건의 상품은 걸러내는 방식으로 소화해야 할 정보량을 줄이고 사용자가 원하는 상품에 더 쉽고 빠르게 도달할 수 있다.
밀러의 법칙
보통 사람이 한번에 기억할 수 있는 항목은 최대 7(+-2)개 정도로 제한된다고 한다.
💡 특정 정보를 제공할 때, 7개 이하 되도록 5개 이하로 제공하는 것이 좋다. 비슷한 부류의 정보들을 묶어서 표현하면 조금 더 가독성 있게 보여줄 수 있다. 
포스텔의 법칙
유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
이 법칙의 대표적인 사례는 '입력 폼' 이다. 폼은 본질적으로 사용자가 서비스와 인터랙션하는 수단이기에 입력하는 정보의 양이 증가할수록 사용자에게 부과되는 인지적 에너지와 노력이 커지게 되어 사용자가 입력 폼을 다 채울 확률이 낮아질 것이다.
💡 
사용자에게 요구하는 정보를 최소한으로, 제한적으로 요청한다. 
또 다른 예시로, 사용자가 '20241018'만 입력해도 자동으로 2024-10-18 형식으로 변환되는 UX가 있다. 
사용자의 실수를 파악하여 텍스트나 alert을 통해 피드백을 제공하여 사용자가 실수를 수정할 수 있게 도와야 한다.
피크엔드의 법칙
사용자 경험은 평균이나 합계가 아니라 절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단된다. '실패했던 경험'은 더 오래 기억하려는 경향이 있다.
💡 따라서, 이러한 순간에도 최대한 부드럽고 재치있게 표현해줘야 한다. 

테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
이 법칙은 글로 이해하기 어려울 것 같아, 토스 앱의 스크린샷을 가져왔다.
 토스는 사용자가 계좌번호를 입력하면 해당 계좌번호에서 은행별 계좌번호 고유의 패턴을 파악해서 '은행 선택' 드롭다운 아래에 추천 은행명 버튼을 표시해준다. 이를 통해 드롭다운으로 일일이 은행명을 찾지 않아도 되는 편리함을 제공하고 있다.
💡 즉, 아무리 단순하게 사용자 경험을 제공해 주려고 노력한다고 하더라고 복잡성을 줄일 수 있는데는 분명 한계가 있는데, 이때에는 그 복잡성을 사용자 대신 행해주는 방식으로 제공해야 한다는 것입니다. 
심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
시각적으로 만족스러운 디자인은 사용성 문제를 가려 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다. 
폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중 가장 색다른 것만 기억한다. 
💡 
특정 기능을 강조하거나 유도하기 위해 진한 컬러, 보색 컬러를 사용한다.
필수 입력 필드에는 Required 표시를 통해 사용자가 중요한 정보를 놓치지 않도록 해야 한다.
🚨 그렇다고 너무 많은 부분을 강조하면 사용자가 필요한 정보를 한눈에 찾을 수 없게 되므로 주의!
도허티 임계
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다. 
사용자가 원하는 정보를 딜레이 없이 바로 보여주면 좋겠지만, 외부 정보를 불러온다면 어쩔 수 없는 딜레이가 발생한다. 
💡 보통 이런 딜레이를 스켈레톤 UI, 로딩 애니메이션 등을 통해 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소해줄 수 있다.

참고문헌
책 'UX/UI의 10가지 심리학 법칙'(존 야블론스키 저)
토스에서 찾아본 10가지 UX 법칙

10가지 UX의 법칙? 그게 뭔데

<img src="https://velog.velcdn.com/images/gkfla668/post/0746dfee-6ee6-4424-b0e9-207e7a034347/image.png" alt="">
클린코드에 대한 좋은 영상이 있어서 정리 + 공유하면 좋을 것 같아 영상 내용을 요약해보려 합니다 :) 
<a href="https://www.youtube.com/watch?v=edWbHp_k_9Y">토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code</a>
<hr>
<h3 id="1-실무에서-클린-코드의-의의">1. 실무에서 클린 코드의 의의</h3>
<blockquote>
** 좋지 않은 코드는 무엇일까요?**
</blockquote>
<ul>
<li>흐름 파악이 어렵고</li>
<li>도메인 맥락 표현이 안되어</li>
<li>동료에게 물어봐야 알 수 있는 코드</li>
</ul>
이런 코드는 개발할 때 병목이 되고, 유지보수할 때 시간이 오래걸리며 심하면 기능 추가까지 불가능한 상태가 됩니다. 성능도 좋지 않은 경우가 많아서 유저 입장에서도 쾌적하지 못하겠죠?
실무에서 클린 코드의 의의를 생각해보면 <code>유지보수 시간의 단축</code>입니다. 동료 혹은 과거의 내가 짠 코드를 빠르게 이해할 수 있다면, 당연히 유지보수할 때 드는 개발 시간이 짧아지겠죠? 
실무에서는 기존 코드에 새로운 기능을 추가하는 작업이 대부분이기 때문에, 효율성을 위해 클린 코드는 중요한 부분을 차지합니다. 
<h3 id="2-안일한-코드-추가의-함정">2. 안일한 코드 추가의 함정</h3>
<blockquote>
만약 코드를 안일하게 짠다면 어떤 함정에 빠질 수 있을까요?
</blockquote>
<ul>
<li>하나의 목적인 코드가 흩뿌려져 있다. </li>
<li>하나의 함수가 여러가지 일을 하고 있다.</li>
<li>함수의 세부 구현 단계가 제각각이다.</li>
</ul>
<h3 id="3-로직을-빠르게-찾을-수-있는-코드--clean-code">3. 로직을 빠르게 찾을 수 있는 코드 === Clean Code!</h3>
명심해야 할 것은 클린 코드는 짧은 코드가 아닌 원하는 로직을 빠르게 찾을 수 있는 코드라는 거에요. 
<blockquote>
원하는 로직을 빠르게 찾으려면 어떻게 해야할까요?
</blockquote>
<ul>
<li>하나의 목적인 코드가 흩뿌려져 있을 때, 응집도를 높여서 뭉치자</li>
<li>함수가 여러가지 일을 하고 있을 때, 단일책임 원칙에 의거하여 쪼개자</li>
<li>함수의 세부구현 단계가 제각각일 때, 추상화 단계를 조정해서 핵심 개념을 필요한 만큼만 노출하자</li>
</ul>
하나씩 살펴보도록 합시다.
<h4 id="1-응집도">1. 응집도</h4>
<img src="https://velog.velcdn.com/images/gkfla668/post/6d433de1-ca92-483c-9c8f-d4831f66f3b3/image.png" alt="">
위 코드를 보면 팝업을 조작하는 코드가 노란색으로 칠한 세 부분에 군데군데 떨어져 있는 걸 볼 수 있어요. 딱봐도 파악도 한번에 안되고 버그 발생 위험도 높은 코드입니다.
리팩토링을 해볼까요?
<img src="https://velog.velcdn.com/images/gkfla668/post/6f5b4f27-8915-4415-9e04-2cf3291f6e28/image.png" alt="">
커스텀 훅을 사용해서 한 군데로 뭉쳤습니다. 이제 openPopup 함수만 호출하면 커스텀 팝업을 열 수 있게 되죠. 
하지만, 오히려 더 읽기 어려운 코드가 되었습니다. 어떤 내용의 팝업을 띄우는지, 팝업에서 버튼을 눌렀을 때 어떤 액션을 하는지와 같은 핵심 개념이 모두 훅 속에 가려져서 오히려 파악이 어렵게 된거죠. 
<blockquote>
그럼 어떻게 무엇을 뭉쳐야 할까요?
당장 몰라도 되는 디테일! 입니다. 
그럼 반면에 무엇을 뭉치면 안될까요? 
코드 파악에 필수적인 핵심 정보 입니다. 이를 분리하면 여러 모듈을 넘나들며 흐름을 따라가야 하는 참사가 일어나기 때문이죠. 
</blockquote>
따라서, 뭉쳐서 짧은 코드로 만든다고 클린 코드라고 할 수 없는 것입니다. 찾고 싶은 코드를 빠르게 찾을 수 있어야 합니다!
<img src="https://velog.velcdn.com/images/gkfla668/post/3631ac7e-ec1d-42c1-bd68-29b9e498abac/image.png" alt="">
이와 같이 openPopup이라는 커스텀 훅 안에 다 숨겨놓는 것이 아닌 세부 구현만 숨겨 놓고, 핵심 데이터인 팝업 제목과 내용, 액션은 바깥에서 넘기는거죠. 이렇게 구현하면 세부 구현을 읽지 않고도 어떤 팝업인지 파악할 수 있게 됩니다. 
이것을 &#39;선언전 프로그래밍&#39;이라고 합니다.
이는 &#39;무엇&#39;을 하는 함수인지 빠르게 이해가 가능하다는 것
세부 구현은 안쪽에 뭉쳐두어서 신경 쓸 필요가 없다는 것
&#39;무엇&#39;만 바꿔서 쉽게 재사용할 수 있다는 것
위와 같이 선언형으로 뭉쳐두지 않고, 하나하나 세부구현을 작성한 방식은
&#39;명령형 프로그래밍&#39;이라고 합니다.
&#39;선언전 프로그래밍&#39;도 내부를 까보면 &#39;명령형 프로그래밍&#39;으로 작성되어 있죠. 
&#39;명령형 프로그래밍&#39;은 세부구현이 모두 노출되어 있어서 이를 커스텀하기 쉽지만, 읽는데 오래 걸리고 재사용하기 어렵다는 단점이 있습니다. 그렇다고 무조건 &#39;선언전 프로그래밍&#39;이 좋은 건 아니랍니다! 두 방법 모두 유동적으로 사용하는 것이 좋다고 하네요. 예를 들어 리액트에서 prop을 세부적으로 넘겨야 하는 경우에는 명령형 설계도 필요하겠죠.
<h4 id="2-단일-책임">2. 단일 책임</h4>
<img src="https://velog.velcdn.com/images/gkfla668/post/a191adfb-39b7-40d7-bac7-73f7e1a579d7/image.png" alt="">
위 코드를 보면, 함수 이름은 질문제출인데 &#39;약관체크&#39;, &#39;질문제출&#39;이 섞여있습니다.
<img src="https://velog.velcdn.com/images/gkfla668/post/1336e4af-2f3b-4183-90f3-b62ca83d2a4d/image.png" alt="">
한가지 일만 하는 명확한 이름의 함수가 되도록 리팩토링한 결과입니다.
훨씬 파악하기가 쉬워지지 않았나요?
<h4 id="3-추상화">3. 추상화</h4>
로직에서 핵심 개념을 뽑아내는 것! 입니다. 
얼마나 추상화 할 것인가? 상황에 따라 필요한 만큼 추상화 하면 됩니다. 
하지만, 주의해야 할 점이 있습니다. 
<img src="https://velog.velcdn.com/images/gkfla668/post/3bbf4bae-7d45-4413-b9b4-a610b9ad66d7/image.png" alt="">
위 코드와 같이 추상화 수준이 섞여 있다면 코드 파악이 어렵다는 점입니다.
따라서, 추상화 단계를 비슷하게 정리해주어 쉽게 파악할 수 있도록 해줘야 합니다.
<hr>
클린 코드는 모호한 개념이기 때문에 글로 정리해보는 시간이 필요했는데, 해당 영상에서 클린코드에 대한 개념이 아주 잘 나와있어서 깔끔하게 정리해보며 다시한 번 짚고 넘어갈 수 있었어요. 당장은 사소한 것일지라도 나중을 위해서 클린코드를 습관화하는 것이 좋을 듯 합니다!

클린코드에 대한 좋은 영상이 있어서 정리 + 공유하면 좋을 것 같아 영상 내용을 요약해보려 합니다 :) 
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
1. 실무에서 클린 코드의 의의
** 좋지 않은 코드는 무엇일까요?**
흐름 파악이 어렵고
도메인 맥락 표현이 안되어
동료에게 물어봐야 알 수 있는 코드
이런 코드는 개발할 때 병목이 되고, 유지보수할 때 시간이 오래걸리며 심하면 기능 추가까지 불가능한 상태가 됩니다. 성능도 좋지 않은 경우가 많아서 유저 입장에서도 쾌적하지 못하겠죠?
실무에서 클린 코드의 의의를 생각해보면 유지보수 시간의 단축입니다. 동료 혹은 과거의 내가 짠 코드를 빠르게 이해할 수 있다면, 당연히 유지보수할 때 드는 개발 시간이 짧아지겠죠? 
실무에서는 기존 코드에 새로운 기능을 추가하는 작업이 대부분이기 때문에, 효율성을 위해 클린 코드는 중요한 부분을 차지합니다. 
2. 안일한 코드 추가의 함정
만약 코드를 안일하게 짠다면 어떤 함정에 빠질 수 있을까요?
하나의 목적인 코드가 흩뿌려져 있다. 
하나의 함수가 여러가지 일을 하고 있다.
함수의 세부 구현 단계가 제각각이다.
3. 로직을 빠르게 찾을 수 있는 코드 === Clean Code!
명심해야 할 것은 클린 코드는 짧은 코드가 아닌 원하는 로직을 빠르게 찾을 수 있는 코드라는 거에요. 
원하는 로직을 빠르게 찾으려면 어떻게 해야할까요?
하나의 목적인 코드가 흩뿌려져 있을 때, 응집도를 높여서 뭉치자
함수가 여러가지 일을 하고 있을 때, 단일책임 원칙에 의거하여 쪼개자
함수의 세부구현 단계가 제각각일 때, 추상화 단계를 조정해서 핵심 개념을 필요한 만큼만 노출하자
하나씩 살펴보도록 합시다.
1. 응집도

위 코드를 보면 팝업을 조작하는 코드가 노란색으로 칠한 세 부분에 군데군데 떨어져 있는 걸 볼 수 있어요. 딱봐도 파악도 한번에 안되고 버그 발생 위험도 높은 코드입니다.
리팩토링을 해볼까요?

커스텀 훅을 사용해서 한 군데로 뭉쳤습니다. 이제 openPopup 함수만 호출하면 커스텀 팝업을 열 수 있게 되죠. 
하지만, 오히려 더 읽기 어려운 코드가 되었습니다. 어떤 내용의 팝업을 띄우는지, 팝업에서 버튼을 눌렀을 때 어떤 액션을 하는지와 같은 핵심 개념이 모두 훅 속에 가려져서 오히려 파악이 어렵게 된거죠. 
그럼 어떻게 무엇을 뭉쳐야 할까요?
당장 몰라도 되는 디테일! 입니다. 
그럼 반면에 무엇을 뭉치면 안될까요? 
코드 파악에 필수적인 핵심 정보 입니다. 이를 분리하면 여러 모듈을 넘나들며 흐름을 따라가야 하는 참사가 일어나기 때문이죠. 
따라서, 뭉쳐서 짧은 코드로 만든다고 클린 코드라고 할 수 없는 것입니다. 찾고 싶은 코드를 빠르게 찾을 수 있어야 합니다!

이와 같이 openPopup이라는 커스텀 훅 안에 다 숨겨놓는 것이 아닌 세부 구현만 숨겨 놓고, 핵심 데이터인 팝업 제목과 내용, 액션은 바깥에서 넘기는거죠. 이렇게 구현하면 세부 구현을 읽지 않고도 어떤 팝업인지 파악할 수 있게 됩니다. 
이것을 '선언전 프로그래밍'이라고 합니다.
이는 '무엇'을 하는 함수인지 빠르게 이해가 가능하다는 것
세부 구현은 안쪽에 뭉쳐두어서 신경 쓸 필요가 없다는 것
'무엇'만 바꿔서 쉽게 재사용할 수 있다는 것
위와 같이 선언형으로 뭉쳐두지 않고, 하나하나 세부구현을 작성한 방식은
'명령형 프로그래밍'이라고 합니다.
'선언전 프로그래밍'도 내부를 까보면 '명령형 프로그래밍'으로 작성되어 있죠. 
'명령형 프로그래밍'은 세부구현이 모두 노출되어 있어서 이를 커스텀하기 쉽지만, 읽는데 오래 걸리고 재사용하기 어렵다는 단점이 있습니다.  그렇다고 무조건 '선언전 프로그래밍'이 좋은 건 아니랍니다! 두 방법 모두 유동적으로 사용하는 것이 좋다고 하네요. 예를 들어 리액트에서 prop을 세부적으로 넘겨야 하는 경우에는 명령형 설계도 필요하겠죠.
2. 단일 책임

위 코드를 보면, 함수 이름은 질문제출인데 '약관체크', '질문제출'이 섞여있습니다.

한가지 일만 하는 명확한 이름의 함수가 되도록 리팩토링한 결과입니다.
훨씬 파악하기가 쉬워지지 않았나요?
3. 추상화
로직에서 핵심 개념을 뽑아내는 것! 입니다. 
얼마나 추상화 할 것인가? 상황에 따라 필요한 만큼 추상화 하면 됩니다. 
하지만, 주의해야 할 점이 있습니다. 

위 코드와 같이 추상화 수준이 섞여 있다면 코드 파악이 어렵다는 점입니다.
따라서, 추상화 단계를 비슷하게 정리해주어 쉽게 파악할 수 있도록 해줘야 합니다.
클린 코드는 모호한 개념이기 때문에 글로 정리해보는 시간이 필요했는데, 해당 영상에서 클린코드에 대한 개념이 아주 잘 나와있어서 깔끔하게 정리해보며 다시한 번 짚고 넘어갈 수 있었어요. 당장은 사소한 것일지라도 나중을 위해서 클린코드를 습관화하는 것이 좋을 듯 합니다!

본 페이지는 상업적 목적이 아닌, 개인 포트폴리오용으로 제작되었습니다.