Programming/3. Experience7 safe triangle target area로 컨텍스트 메뉴 사용성 높이기 Prologue최근 리뉴얼 프로젝트에 참여해 서비스 전체 레이아웃 및 디자인을 개편하는 작업을 진행했습니다. 기존의 콘텐츠를 세분화하고 메뉴를 확장하며 GNB 구성에도 변화가 있었는데요. 1차 메뉴로만 구성된 단순한 GNB에서 1차-2차 메뉴의 depth로 확장되면서 메뉴 이동 시 유저 경험을 향상하기 위해 safe triangle target area를 적용하게 되었습니다. 이번 글에서는 이것이 무엇인지, 그리고 어떻게 적용했는지에 대한 경험을 소개해보고자 합니다. 👉🏻 2차 메뉴 선택 방식 위 이미지처럼 2차 메뉴에 접근할 때 1차 메뉴를 벗어나 대각선으로 접근한 경험이 있을 거라 생각합니다. 그런데 생각해 보면 타겟이 되는 1차 메뉴에서 마우스가 벗어나면 2차 메뉴가 닫혀야 정상인데 멀쩡하게 이.. 2024. 8. 15. useReducer + custom hook으로 state 관리하기 PrologueuseState는 참 편리한 훅입니다. 초기값 할당과 업데이트, 사용 방식이 매우 직관적이고 단순하죠. 하지만 한 컴포넌트 안에 state가 많이 존재한다면, 그리고 한 함수에서 여러 state를 업데이트해야 한다면 컴포넌트 규모는 금새 커지게 됩니다. 이번 글에서는 이 문제를 해결하기 위해 useReducer를 활용한 custom hook 제작 사례를 소개하려 합니다. 발단대부분의 서비스에는 로그인, 회원가입과 같은 인증 페이지가 존재합니다. 그리고 그 페이지에는 아이디, 이름, 비밀번호 등 단순한 입력값뿐만 아니라 휴대폰 인증 여부, 비밀번호 양식 검증 등 유효성 검사를 관리하기 위해 많은 상태와 비즈니스 로직이 존재합니다. 제가 담당했던 서비스 또한 많은 상태로 인해 꽤 복잡해진 상태.. 2024. 7. 26. emotion to scss module 도입기 Prologue emotion 도입 이후 도메인별로 작성된 스타일시트를 컴포넌트 레벨로 분리하며 가독성과 생산성이 향상하는 성과를 이뤘습니다. 하지만 최근 프로젝트부터는 scss module을 도입하는 방향으로 변경했는데, 그 이유와 과정, 결과에 대해 작성해보고자 합니다. 문제점 시작은 Next.js의 app router 적용부터였습니다.Next.js 13.4 릴리즈와 함께 app router의 안정화가 이루어졌고, 이에 맞춰 전체 서비스를 마이그레이션 하는 프로젝트를 진행했습니다. 클라이언트-서버 컴포넌트라는 새로운 패러다임에 맞춰 전체 구조를 변경하는 과정에서 초기 렌더 시 스타일이 주입되지 않는 이슈가 있었는데, 문제는 다음과 같았습니다. 런타임 자바스크립트가 필요한 css-in-js 라이브러리.. 2024. 7. 25. 서비스에 감정 불어넣기! @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 다음 반응형
