본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 프로그래머를 위한 다양한 정보를 다루는 블로그 매체 ‘Better Programming’의 글을 번역했습니다. 작가는 트레버 인드렉 라스(Trevor Indrek Lasn)로 프로그래머이자 스토리 텔러입니다. 본문은 프론트엔드 코딩 작업에 유용한 8가지 아이디어를 소개합니다. 읽어보신 후, 괜찮은 아이디어가 있다면 적용해보세요!
프로그래밍을 마스터하기란 어렵습니다. 지름길도 없습니다. 엄청난 노력이 필요합니다. 그리고 익숙해질 때까지 최대한 자주 직접 코딩을 해봐야 합니다. 이번 글에서 소개하는 아이디어로 영감을 받아보시기 바랍니다. 여러분 각자가 흥미를 느끼는 아이디어를 하나 골라서 프로그래밍 작업을 할 때 직접 사용하세요. 여러분이 어떤 프로그래밍 언어를 사용하며, 어떤 도구를 선호하든 관계없습니다. 각각의 아이디어를 구현하면서 배울 수 있는 점도 함께 설명하겠습니다. 그러면 이제부터 코딩을 위한 아이디어를 소개해보도록 하겠습니다.
1. 메뉴 탭 바의 애니메이션
아래의 그림은 탭을 전환할 때 60 FPS(초당 프레임 수)의 애니메이션을 활용해서 부드러운 움직임을 구현한 헤더입니다. 이처럼 매끄러운 60 FPS의 애니메이션을 구현하기 위해서는 CSS 애니메이션이나 자바스크립트를 사용하면 됩니다.
CSS의 여러 변수들, 키 프레임(key frame)[7], 클립 패스(clip-path)[8]의 사용법
정교한 호버 애니메이션을 만드는 방법
3. 체스 말들이 놓인 체스보드
월터 테비스(Walter Tevis)가 1983년에 펴낸 소설을 원작으로 만든 넷플릭스의 드라마 <퀸스 갬빗(The Queen’s Gambit)>이 인기를 거두면서, 이 드라마의 소재인 체스에 대한 관심도 폭발하고 있습니다. 드라마를 아직 안 보셨다면, 꼭 보시라고 권하고 싶습니다! (보너스 팁: 체스보드를 실제로 반응하게 만드는 것이 포인트입니다.)
칩 AI 체스!(Cheap AI Chess!)[9], 제작: 제이크 앨보(Jake Albaugh)
체스보드를 만들면서 배울 수 있는 점
8×8 그리드를 만드는 법. CSS 그리드[10]를 활용해서 한 번 시도해보세요.
CSS를 이용해서 체스 말을 그리는 방법
보너스: 자바스크립트로 이 모든 걸 실제로 반응하게 만드세요.
4. 프로젝트 관리 대시보드 UI
이번에는 프로젝트 관리 목적의 대시보드입니다. 프로젝트를 모니터링하고 클라이언트와 대화를 나누는 용도입니다.
프로젝트 관리 대시보드 UI[11], 제작: 아이뷔케 제일란(Aybüke Ceylan)
프로젝트 관리 대시보드를 만들면서 배울 수 있는 점
CSS와 HTML을 이용해서 깔끔한 UI를 만드는 방법
웹소켓(WebSocket)[12]을 이용해서 채팅 기능을 만드는 방법
5. 뉴모피즘(Neumorphism) 애니메이션
“뉴모피즘, 또는 네오-스큐어모피즘(Neo-skeuomorphism)이란, 웹 구성요소, 프레임, 화면 등을 디자인하는 과정에서 자주 사용되는 현대적인 기법이다.” – 깃허브(GitHub)