왼쪽 vs 오른쪽: 최적의 버튼 배치는 어디일까?
·
Frontend/UI UX
웹이나 앱 UI에서 버튼의 위치를 고민해 본 적이 있으신가요? 다양한 사이트와 애플리케이션을 보면 버튼이 오른쪽에 배치된 경우가 많지만, 일부는 왼쪽에 있는 경우도 있습니다. 특히 한국에서는 오른쪽 정렬이 일반적이지만, 해외 플랫폼에서는 왼쪽 정렬을 더 많이 사용하기도 합니다. 그렇다면 버튼은 어디에 배치하는 것이 더 적절할까요? 그리고 한국에서는 왜 오른쪽 정렬이 더 많을까요? 함께 살펴보겠습니다.한국에서는 왜 오른쪽 정렬이 많을까요? 🤔사용자 기대치와 일관성한국에서 많이 사용되는 Windows UI를 비롯한 다양한 국내 서비스는 오래전부터 버튼을 오른쪽에 배치해 왔습니다. 자연스럽게 사용자는 버튼이 오른쪽에 있을 것이라 기대하게 되었고, 이러한 패턴이 굳어진 것입니다. 익숙한 디자인을 유지하는 것이..
웹사이트에서 자주 사용되는 UX 읽기 패턴
·
Frontend/UI UX
웹사이트 방문자는 정보를 어떤 순서로 읽을까요?웹페이지의 모든 단어를 하나하나 읽는 경우는 드뭅니다. (저도 자연스럽게 핵심만 찾아 읽게 되는 것 같아요.. 🤪)대부분의 사람들은 자연스럽게 문단의 시작이나 핵심 단어를 찾아 효율적으로 정보를 얻으려 합니다. 실제로 웹사이트에서 사용자의 평균 주의 시간은 10~20초에 불과합니다.따라서 웹사이트에서 정보를 배치하는 방식에 따라, 사용자는 짧은 시간 안에 더 많은 내용을 효율적으로 파악할 수도 있고, 반대로 필요한 정보를 놓칠 수도 있습니다.UI/UX 디자인에서는 사용자의 시선 흐름을 예측하고, 웹사이트의 가독성과 사용성을 높이기 위해 다양한 읽기 패턴을 활용합니다.이번 글에서는 웹사이트에서 가장 많이 사용되는 읽기 패턴을 정리해 보았습니다.Z 패턴Z 패턴..
Bun: 빠르고 혁신적인 JavaScript 런타임Bun이란?
·
Frontend/Development
Bun이란?Bun은 2023년 9월에 1.0 버전이 출시된 JavaScript 런타임으로, Node.js의 드롭인(drop-in) 대체를 목표로 합니다.Bun은 Zig언어로 개발되었으며, 구글 Chrome의 V8 엔진 대신 Apple의 JavaScriptCore엔진을 사용합니다. 이로 인해 속도와 실행 최적화에 강점을 가집니다.V8과 JavaScriptCore의 차이점특징V8(Chrome)JavaScriptcore(Safari)실행 속도 최적화고성능 JIT(Just In Time) 컴파일러, 빠른 실행빠른 초기 실행, 경량화메모리 사용비교적 높은 메모리 사용량최적화된 메모리 관리호환성Node.js와의 높은 호환성Apple 생태계 중심 최적화왜 0.xx 버전은 주목받지 못했을까?Bun이 처음 등장한 0.x..
npm이 설치하지 않은 패키지를 실행할 수 있는 이유
·
Frontend/Dev Notes
유령 의존성이란?개발 하다 보면, 어떤 패키지는 package.json에 명시적으로 추가한 적이 없는데도 프로젝트에 사용할 수 있는 경우가 있습니다. 또는 npm install을 했을 때 예상보다 더 많은 패키지가 설치되는 경우가 있습니다. 이런 현상을 유령 의존성이라고 부릅니다.📌 유령 의존성이 발생하는 주요 원인직접 설치하지 않은 패키지가, 하위 패키지를 통해 설치되면서 마치 직접 의존하는 것처럼 보이는 경우패키지 매니저에 따라 의존성 트리가 다르게 구성되는 경우=> npm은 90개의 하위 폴더, pnpm은 9개의 하위 폴더가 생김 📌 예제 재현mkdir npm-test && cd npm-testnpm init -ynpm install react react-dom typescript eslintm..
React 18, 19: 새롭게 나온 Hook 소개
·
Frontend/Development
React는 매 업데이트마다 개발자의 생산성과 사용자 경험을 개선하기 위해 새로운 기능을 도입해왔습니다. 특히 React 18과 19에서는 비동기 작업 관리와 UI 반응성을 향상시키는 여러 Hook이 추가되었습니다. 이번 글에서는 useId, useTransition, 그리고 useOptimistic과 같은 최신 Hook을 살펴보고, 이를 통해 어떻게 효율적인 비동기 처리가 가능한지 탐구해 보겠습니다.useIduseId는 React 18에서 고유한 ID 생성을 위해 도입된 Hook입니다. 서버와 클라이언트에서 동일한 ID를 생성하여 렌더링의 일관성을 보장하며, 클라이언트-서버 간 불일치를 방지할 수 있습니다.아래는 useId를 사용하여 고유 ID를 생성하고, 폼의 label과 input을 연결하는 예제입..
3개월 동안 글또 활동 회고
·
ETC
글또 참여 전: 꾸준한 글쓰기의 어려움"꾸준히 작성해야지."이 말은 제가 가장 자주 다짐했던 말 중 하나였습니다. 그러나 현실은 바빴던 업무와 일정, 그리고 "주말은 쉬어야 한다"는 핑계로 글쓰기를 미루기 일쑤였습니다. "이번 주는 시간이 없으니 다음 주에 써야지." 이렇게 미뤄둔 주제들은 점점 쌓여갔고, 결국 시기를 놓쳐 묻혀버리는 경우가 많았습니다. 특히 기술 블로그를 운영하는 것은 생각보다 어려운 일이었습니다. 단순히 개인적인 생각을 적는 것과 달리, 기술적인 글은 자료 조사, 코드 작성, 그리고 독자가 이해하기 쉽게 설명하는 노력이 필요했습니다. 이러한 과정을 반복하다 보면 쉽게 지치거나, '완벽하지 않다'는 불안감 때문에 시작조차 못한 적도 많았습니다. 그러던 중 글또라는 커뮤니티를 알게 되었습..
끄적끄적 개발자
코딩을 끄적끄적