Programming/3. Experience4 서비스에 감정 불어넣기! @emotion 적용기 Prologue 공교롭게도 지난번 글이 '서비스에 Styled-Components를 적용했던 썰' 이었는데, 이번 글이 'Styled-Components를 걷어내고 emotion을 도입하게 된 썰'이 될 줄은 몰랐지만 😂 아무튼! 이번 경험담 또한 스타일에 관한 이야기다. 잠깐 배경 설명을 하자면, 우리 팀은 입사하기 전까지 SCSS로 스타일을 작성하고 있었다. 그리고 팀 내에서는 CSS-in-JS 도입에 관한 논의를 진행하고 있었는데, 마침 내가 입사하면서 도입을 시도하게 됐으니 그것이 바로 Styled-Components였다. 공통 스타일 변수부터 전역 스타일까지 모든 세팅을 마치고 푸터와 레이아웃 일부에 이를 도입하며 성공적으로 안착하는 듯 했으나, 방대한 기존 스타일을 대체하기엔 다소 맞지 않다는.. 2022. 11. 26. SCSS에서 Styled-Components로 변환하며 겪은 썰.txt 입사 후 주어진 첫 과제 어느덧 입사한 지 2주가 다 될 무렵, 드디어 첫 미션이 주어졌다. Nuxt(Vue)에서 Next(React)로 마이그레이션하는 프로젝트에 푸터 파트를 작업하는 것이었다. 로직도 없고 단순히 마크업만 하는 작업이었기에, '이 정도는 거뜬히 할 수 있지!'라고 생각했지만 예상외의 난관에 부딪히게 됐다. 바로 @mixin을 비롯한 수많은 '@'로 이루어진 SCSS 때문이었다. 난관 이 글을 읽는 대다수의 분들이라면 SCSS에 대해 알고 있겠지만, 혹시나 모르는 문들을 위해 간단히 설명하자면 다양한 편의 기능을 갖춘 CSS라고 생각하면 된다. 여러 연산이나 코드의 재사용 등 여러 기능들로 보다 편리하게 스타일 작업을 할 수 있다는 장점이 있지만, Styled-Components로 변환.. 2022. 5. 16. [연습] Momentum 응용하기 작업 개요 노마드 코더 JavaScript Challenge 졸업 작품 (우수 졸업작 선정 👑 ) Chrome 앱인 Momentum의 주요 기능을 구현해보는 작업 자바스크립트의 다양한 기능(시간, 날씨, 투두리스트 등)을 다뤄볼 수 있었다 🚀 주요 기능 현재 시간과 날짜 구현 / 시간 사이의 ' : ' 에 애니메이션 효과를 줘서 좀 더 동적인 페이지의 느낌을 구현 사용자 이름 입력 창을 클릭하면 글씨가 사라지고 입력 바만 나오도록 설정해 깔끔하고 집중되는 느낌을 구현 이름 옆 reset 버튼을 만들어 수정이 가능하도록 구현 투두리스트 슬라이더를 만들어 배경화면으로써 이용하고 싶을 때 깔끔하게 느껴지도록 버튼 제작 배경에 그라데이션 애니메이션을 넣고 새로고침이나 왼쪽 하단 버튼을 누르면 랜덤으로 배경 컬러.. 2021. 6. 23. [연습] HTML, CSS로 계산기 만들기 계산기 만들기 계산기 강의를 듣다가 '이왕 만드는 거 예쁘게 만들어볼 수 없을까?'라는 생각에 이번 프로젝트를 진행하게 됐다. 이후에는 시계와 날씨 쪽까지 같은 디자인으로 진행해보고자 한다. 디자인 소개 우선 디자인은 '뉴모피즘(Neumorphism)'디자인을 콘셉트로 만들어보기로 했다. 뉴모피즘이란 New(새로운) + Skeuomorphism(스큐어모피즘)의 합성어이다. 스큐어모피즘(Skeuomorphism)이란 현대미술과 현대 산업 디자인에서 사실적인 시각적 효과를 중요시하는, 대상을 원래 그대로의 모습으로 사실적으로 표현하는 디자인 기법으로 3차원적이고 사실주의적인 것이 특징이다. 애플의 UI 디자인을 떠올리면 쉽게 연상이 될 것이다. 하지만 너무 사실적인 것에 질렸던 것일까? 미니멀하고 심플하고 .. 2021. 5. 2. 이전 1 다음 반응형
