본문 바로가기

전체 글64

[UI/IX 컴포넌트 오픈소스 #05] "접근성(A11y)이 돈이 되는 시대", Headless UI의 숨겨진 힘 안녕하세요! 겉으로 보이는 화려한 디자인보다, 보이지 않는 곳에서 묵묵히 돌아가는 견고한 로직의 아름다움을 사랑하는 프론트엔드 사수, 웹 개발자입니다.지난 4편에서는 애플(Apple) 웹사이트처럼 눈을 뗄 수 없게 만드는 화려한 애니메이션과 마이크로 인터랙션의 세계를 탐험했습니다. 아마 당장이라도 포트폴리오에 적용해 보고 싶은 마음이 굴뚝같으실 텐데요. 하지만 오늘은 분위기를 조금 반전시켜서, 화려한 껍데기 뒤에 숨겨진 프론트엔드의 아주 깊고 어두운, 하지만 반드시 알아야만 하는 '진짜 실력'에 대해 이야기해 보려고 합니다.바로 '웹 접근성(Accessibility, 일명 A11y)'과 이를 완벽하게 해결해 주는 마법의 뼈대, 'Headless UI(헤드리스 UI)'에 대한 이야기입니다. 2026년 현재.. 2026. 4. 3.
[UI/IX 컴포넌트 오픈소스 #04] "화려한 애플(Apple) 웹사이트의 비밀", Aceternity UI & Magic UI 안녕하세요! 여러분의 밋밋한 포트폴리오에 생명력을 불어넣어 줄 프론트엔드 심폐소생술사, 웹 개발자입니다.프론트엔드 개발자로 일하다 보면 기획자나 클라이언트에게 가장 많이, 그리고 가장 두려운 요구사항을 듣게 됩니다. "개발자님, 우리 메인 홈페이지... 그, 애플(Apple) 웹사이트처럼 만들어주시면 안 될까요? 스크롤 내리면 글자가 스르륵~ 나타나고, 마우스 움직이면 빛이 막 따라다니는 거요!" 과거의 저였다면 이 말을 듣자마자 식은땀을 흘리며 도망쳤을 겁니다. 순수 CSS의 @keyframes를 이용해 애니메이션을 짜본 분들은 아실 겁니다. 코드는 끝도 없이 길어지고, 브라우저마다 호환성도 다르고, 무엇보다 스크롤 위치나 마우스 좌표를 자바스크립트로 계산해서 화면을 움직이게 만드는 것은 엄청난 렌더링.. 2026. 4. 2.
[UI/IX 컴포넌트 오픈소스 #03] "설치하지 말고 복사하세요", 생태계의 절대 존엄 'Shadcn UI' 여러분, 안녕하세요! 코딩하다 막히면 언제든 찾아와 해답을 얻어갈 수 있는 여러분의 든든한 프론트엔드 사수, codeBricks입니다.지난 2편에서는 이름 짓기의 고통을 없애고 개발 속도를 비약적으로 끌어올려 주는 마법의 도구, '테일윈드(Tailwind CSS)'에 대해 알아보았습니다. 자, 이제 우리는 테일윈드라는 강력한 무기를 얻었습니다. 그런데 막상 프로젝트를 시작하려고 하니 또 다른 막막함이 밀려옵니다."테일윈드가 좋은 건 알겠는데... 그럼 버튼 하나, 모달 창 하나, 드롭다운 메뉴 하나를 언제 다 처음부터 끝까지 테일윈드 클래스명을 쳐서 만들고 앉아있지?" 맞습니다. 아무리 레고 조립이 재밌다 한들, 매번 바퀴부터 새로 만들 수는 없는 노릇이죠. 과거에는 이런 귀찮음을 해결하기 위해 npm .. 2026. 4. 1.
[UI/IX 컴포넌트 오픈소스 #02] "처음엔 욕하지만 결국 사랑하게 되는 마약", Tailwind CSS 완벽 가이드 안녕하세요! 매일 쏟아지는 새로운 프론트엔드 기술의 홍수 속에서, 여러분의 퇴근 시간을 1시간이라도 앞당겨드릴 실전 로직을 연구하는 codeBricks입니다.지난 1편에서는 우리가 왜 정들었던 순수 CSS와 Styled-components를 눈물을 머금고 떠나보내야 했는지, Next.js 서버 컴포넌트 환경이 가져온 거대한 생태계의 지각 변동에 대해 이야기 나누었습니다. 그렇다면 자바스크립트 런타임의 간섭 없이, 빠르고 가벼우면서도 클래스명 짓기의 고통을 없애줄 2026년 현재의 완벽한 대안은 무엇일까요?프론트엔드 개발자 10명 중 9명이 현재 실무에서 사용하고 있으며, 처음에 코드를 보면 "이게 무슨 끔찍한 혼종이야?"라고 쌍욕을 하다가도 딱 한 달만 써보면 "이제 이거 없이는 코딩 못 하겠다"며 찬양.. 2026. 3. 31.
[UI/IX 컴포넌트 오픈소스 #01] 우리는 왜 더 이상 CSS를 생짜로 짜지 않는가? 안녕하세요! 개발이라는 0과 1의 차가운 논리 속에서, 오늘도 어떻게 하면 조금이라도 더 효율적인 로직을 짤 수 있을까 치열하게 고민하는 codeBricks입니다. 오늘은 프론트엔드 개발자라면 누구나 가슴 한구석에 품고 있는 아주 징글징글한 애증의 대상, 바로 'CSS(Cascading Style Sheets)'에 대한 이야기를 해보려고 합니다. 코딩을 갓 시작한 초보자 시절, 화면에 버튼 하나를 예쁘게 띄우고 색깔이 변하는 것을 보며 "와, 내가 마법사가 된 것 같아!" 라며 환호했던 기억이 다들 있으실 겁니다. 하지만 프로젝트의 덩치가 커지고 실무에 투입되는 순간, 그 귀엽던 CSS는 밤잠을 설치게 만드는 거대한 괴물로 변모하곤 하죠.도대체 웹 개발 생태계에서는 무슨 일이 있었길래, 우리는 과거의 '.. 2026. 3. 30.
[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #12] 포스트맨에선 되는데 왜 안돼? 지긋지긋한 CORS 에러 완벽 타파 안녕하세요! 지난번 배포 환경의 미스터리, 환경변수(.env)의 함정에서는 무사히 탈출하셨나요? 드디어 서버에 내 코드를 띄우셨다니 정말 축하드립니다! 자, 오늘은 프론트엔드와 백엔드가 처음으로 만나서 데이터를 주고받을 때, 무조건 100% 확률로 마주치게 되는 붉은색 에러의 대명사에 대해 이야기해 볼까 합니다. 프론트엔드 개발자가 열심히 만든 화면에서 백엔드 API로 첫 로그인을 시도합니다. 그런데 콘솔창에 무시무시한 빨간 글씨가 도배됩니다. Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy. 등골이 서늘해지죠. 프론트엔드 개발자는 억울합니다. "어? 백엔드 개발자님이 주신 API 주소, 포스트맨(Pos.. 2026. 3. 29.

티스토리툴바