웹 개발에서 CSS는 사용자 경험이나 예술의 표현같이
단순히 웹 페이지를 '꾸미는' 것 이상의 역할을 합니다.
허나, 애니메이션 구현은 역시 곤혹스러울 수 밖에 없습니다.
이번 기회에 다양한 CSS 구현 사례를 찾아보고 이를 통해 CSS로 무엇이 가능한지,
그리고 다른 개발자들이 어떻게 애니메이션을 구현했는지 예시를 통해 알아보고자 합니다.
아래에는 몇 가지 CSS 예시입니다.
-각 키가 눌리는 듯한 애니메이션 효과를 구현했다.
구현은 생각보다 간단하며 글자마다 시간과 구간을 다르게 설정하였다.
@keyframes pressDown1,pressDown2, ...,pressDown8: 각 키에 대한 다양한 '눌림' 애니메이션을 정의합니다. 이들은 키가 눌렸을 때 아래로 이동하는 효과를 만듭니다.
.key:nth-child(1) { animation: pressDown1 2s infinite; }, 등등: 각 키에 서로 다른 애니메이션을 적용합니다. 이는 각 키가 다른 시간 간격과 속도로 '눌림' 효과를 반복하도록 합니다.
background-clip: text; : 백그라운드 이미지를 텍스트 모양으로 잘라내는 개념background-image: linear-gradient(90deg, #0077e7, #01d8d1); : 백그라운드 색상을 그라디언트로 설정.animation: hueShift 6s infinite linear 1s; 6초 동안 무한 반복되는 애니메이션을 적용
일정속도로, 1초동안 지속: 애니메이션에 지속적이고 균일한 움직임
-일식을 구현했다!
달의 움직임 (
moveshadow ): 달이 좌우로 움직이면서 그림자 효과와 함께 색상이 변하는 효과를 만듭니다. 달은 왼쪽에서 오른쪽으로 이동하며, 중간에 검은색으로 변하고 그림자가 생깁니다.배경색 변화 (
dayToNight): 배경색이 하얀색에서 검은색으로 변하는 것을 나타냅니다. 이는 낮에서 밤으로의 변화를 시각적으로 표현합니다. 배경색은 흰색에서 점차 어두워지다가 다시 밝아지는 순환을 반복합니다.- css로 이렇게까지 구현이 가능한것에 신기해서 가져와보았다.
개인의 창의성에는 자연스럽게 한계가 존재하기 때문에
다양한 소스에서 인사이트를 모으고,
다른 개발자들의 해결책을 찾아보는 것은 매우 중요한것 같다.
다른 사람들의 아이디어와 접근 방식에서 영감을 얻음으로써,
우리가 할 수 있는 것의 범위는 넓어지며 새로운 관점을 제공하고,
우리가 상상하지 못했던 방식의 문제 해결방식을 제시해준다.
어디까지 CSS를 다룰 줄 알아야하는가?
위의 예시를 수집하면서 자연스럽게 어느 수준까지 CSS 를 다룰 줄 알아야 하는지 의문이 들었다.
검색 도중 좋은 글을 찾아서 아래에 정리해보았다.
- 위의 두 사이트는 수억명이 사용하는 사이트이나 해당 사이트를 모방하는것은 어려운 디자인 기술은 아니다. 물론 훌륭한 디자이너들이 연구한 결과물이나, 구현자체는 어렵지 않다.
프론트엔드, 즉 사용자가 직접 사용하는 애플리케이션의 앞단을 개발할 때에는
결국 다음과 같은 소양이 필요하다.
화면 구성을 할 줄 아는 능력 (레이아웃)보기 좋은 화면을 만들 줄 아는 능력 (타이포그래피, 색상)
다음은 있으면 좋은 소양이다. [Optional]
정렬이 어긋나거나 배색이 좋지 않음을 인지할 수 있는 감각사용자가 사용하기 편한 앱이 무엇인지, 왜 편하게 느끼는지에 대한 이유를 분석해본 경험
=> 자료 출처 : 캡틴판교의 프런트엔드 개발 상담소
CSS 고유의 복잡함을 다루기 위해서,
모든 종류의 다양한 모범 사례(best practice)가 만들어졌습니다.
문제는, 어떤 모범 사례가 실제로 제일 나은지 대한 합의된 내용이 없고,
모범 사례 중 많은 것들이 서로 완전히 상충되는 것처럼 보입니다.
만일 처음으로 CSS를 배우려고 한다면, 이 말이 혼란스럽게 다가올 것입니다.
⇒ 모범사례 위주로 CSS를 학습해 나가면 된다고한다.
출처:
