들어가며2025년 팀 스터디로 장비 관리용 웹 사이트를 만들어, 그 위에 테스트를 붙여보자는 방향으로 진행되었는데 상반기에 개인 사정으로 자리를 비우게 되어, 팀에서 진행한 테스트 코드 학습에 참여하지 못하여 뒤늦게 Playwright에 대해 알게 되었습니다.이 글은 Playwright를 처음 사용해 보며 느낀 점과, 실제로 어떻게 동작하는지에 대해 정리한 기록입니다.PlaywrightPlaywright는 웹 애플리케이션을 실제 사용자처럼 테스트할 수 있는 E2E(End-to-End) 테스트 도구입니다. 브라우저를 직접 실행해서 클릭, 입력, 페이지 이동 같은 동작을 자동화하고, 그 결과를 검증합니다.왜 playwright를 선택하게 되었을 까하고 고민해보니 “사용자가 이 화면에서 이 버튼을 누르면, 다..

들어가며UI 개발을 하다 보면 누구나 한번은 겪는 문제가 있습니다.분명히 똑같은 수치와 CSS를 이용해서 구현했는데 왜 구현된 결과물이 피그마와 달라 보이는 걸까? 어렴풋이 어떤 이유일 거라고 짐작만 하던 이 차이점을 이번에 맘먹고 한번 찾아보았습니다. 원인을 알아보자1. 픽셀 렌더링의 차이피그마는 본래의 목적이 디자인 툴이기 때문에 canvas 환경에서 ‘논리적 픽셀’(벡터 기반 렌더링 방식)을 기준으로 표시합니다.반면에 웹브라우저는 디스플레이 DPI / PPI / Device Pixel Ratio(DPR) 등을 고려한 ‘물리적 픽셀’로 렌더링 됩니다. 이 과정에서 보정이 일어나 미세한 오차가 발생할 수 있습니다. 일부 상황에 대해서 표로 요약하면 다음과 같습니다.상황피그마 표현 방식웹브라우저 표현..

공수산정 시 IA와 디자인 시안이 없을 때 어떻게 해야 하나요 ? 들어가며최근 그룹 내 공수산정 스터디에 참여하면서, 공수 산정에 대한 다양한 관점과 실제 적용 방식을 정리할 기회가 되었습니다.특히 “자료가 충분하지 않은 상황에서도 어떻게 이해할 수 있는 공수를 산정할 수 있을까”에 대해 많은 인사이트를 얻어 회고 형태로 정리해보았습니다. IA가 없을 때는 ‘유형 패턴’으로 페이지 볼륨 예측하기공수 산정 단계에서는 IA가 준비되지 않는 것이 대부분입니다. 따라서 사이트 유형별로 반복되는 패턴을 파악하여 페이지 수를 추정해야 합니다.서비스형 웹사이트 (SaaS·플랫폼 등)메인 1p + 2Depth 메뉴 약 5 ~ 8개 +α(하위 메뉴 및 파생 페이지)p프로모션/캠페인 페이지메인 1p + 참여/결과/이벤트 ..

1. 교육을 들으며최근 외부 교육인 "생성형 AI 이해 및 Prompt Engineering"과정에 참여했다.업무에서도 ChatGPT나 Claude를 자주 활용하고 있었기에, 이번에는 'AI를 좀 더 정확하게, 좀 더 똑똑하게 다루는 방법'을 배워보고 싶었다.하지만 막상 교육을 듣고 나니, AI를 '잘 다루는 법'을 배우는 시점은 이미 지났다는 생각이 들었다.AI는 이미 우리가 기대한 '활용의 단계'를 넘어, 인간의 언어적 불완전함을 스스로 보완하고, 맥락을 읽는 수준으로 진화해 있었다. 2. 생성형 AI의 이해 - 더 이상 '문장을 예측하는 기계'가 아니다강의 초반에는 AI의 기본 작동 원리를 다뤘다.AI는 인간처럼 의미를 ‘이해’하는 것이 아니라, 단어를 잘게 나눈 뒤 확률적으로 다음 단어를 예측하는..

들어가며프로젝트 초반, 기획서는 정제되어 있었고 디자인도 군더더기 없이 잘 다듬어져 있었습니다.정리된 시안을 보면 누구든 이렇게 생각할 수 있습니다."이 정도면 그냥 그대로 구현만 하면 되겠네."하지만 실제 개발을 시작해 보면, 오히려 이런 ‘완벽한 시안’이 더 복잡한 구현 문제를 유발하는 경우도 있습니다.기획과 디자인에서 정리되지 않은 여백은 결국 프론트엔드 개발자의 판단과 설계로 채워지게 되며,그 과정에서 예상치 못한 간극들이 드러납니다. 1. 기획과 디자인은 ‘정적인 스냅샷’, 구현은 ‘동적인 흐름’정상 데이터가 있을 때특정 화면 크기에서의 UI정상적인 사용 흐름을 전제로 한 UX하지만 실제 구현은 그보다 훨씬 더 다양한 상태와 흐름을 감안해야 합니다. 예를 들면,로딩 중 상태, 에러 상태, 빈 상..

해당 글은 현재 총 4편의 시리즈로 구성되어 있습니다."누구나 자료구조와 알고리즘"을 (일부)읽고.."누구나 자료구조와 알고리즘"을 (일부)읽고..(2)"누구나 자료구조와 알고리즘"을 (일부)읽고..(3)"누구나 자료구조와 알고리즘"을 (일부)읽고..(4) (현재글)들어가며작업을 하다 보면 ‘노드(node)’라는 단어를 자주 접하게 됩니다. 특히 프론트엔드 개발을 하다 보면 DOM 구조 속 요소를 노드라고 부르기도 하죠.저 역시 그 정도로만 알고 있었는데, 자료구조를 공부하면서 처음으로 노드가 얼마나 중요한 개념인지 알게 되었습니다. 단순히 태그를 감싸는 요소가 아니라, 데이터를 효율적으로 구성하고 연결하는 구조의 핵심이었던 거죠.처음 자료구조를 접하는 분들이 가장 헷갈리는 부분 중 하나가 바로 노드..

기획과 디자인 단계에서부터 고려해야 하는 성능 이야기 들어가며최근 프로젝트를 진행하면서 문득 이런 생각이 들었습니다. "성능 최적화는 언제나 개발자 몫인가?"라는 의문이었죠.기획서에는 분 단위 데이터 갱신이라고 적혀있고, 디자인에는 화려한 애니메이션과 고해상도 이미지들이 가득한데, 정작 성능에 대한 고려는 개발 단계에서야 시작되는 경우가 대부분입니다.물론 성능 최적화의 기술적 구현은 개발자의 역할이 맞습니다. 하지만 정말 좋은 성능은 기획과 디자인 단계부터 함께 고민할 때 나온다는 것을 여러 프로젝트를 통해 깨달았습니다.이번 글에서는 실제 프로젝트에서 겪었던 사례들을 바탕으로, 각 단계에서 성능을 함께 고려했을 때 얼마나 더 나은 결과를 만들 수 있는지 공유해보고자 합니다. 현실: 성능 이슈가 시작되는 ..

들어가며Next.js 프레임워크로 React 프로젝트를 매번 구성하던 중, 프레임워크 없이 새롭게 프로젝트 환경을 설정해야 할 상황이 생겼습니다. AI의 도움을 받아 설치를 진행하는 과정에서, 평소 익숙하게 사용하던 Create React App(CRA) 방식이 아닌 Vite 형태로 설치하는 것을 보게 되었습니다. 이를 계기로 Vite에 대해 알아보게 되었고, React 환경을 쉽게 시작할 수 있게 해주는 공식 CLI 도구인 CRA가 더 이상 사용되지 않는다는 소식을 접하면서 Vite로 설정하는 방법을 찾아보게 되었습니다. CRA 문제점올해 2025년 2월, React 팀이 공식적으로 CRA를 deprecated 선언했습니다.더 이상 공식적으로 지원하지 않는다는 뜻이죠.그렇다면 그동안 CRA 문제점은 어..

웹 퍼블리싱 트렌드 기술 변화 (feat. container, cascade, :has(), view transitions, Figma DevMode) 들어가며복직 후 웹 기술의 변화 속도가 이전보다 훨씬 빨라졌다는 것을 실감했습니다.AI 기반의 작업 방식 변화도 크지만,특히 UI 개발자 입장에서 실무에 적용 가능한 기술들이 다양하게 등장했고,디자인 시스템, 마크업 구조, 디자인 툴 연동 방식 등에도 큰 변화가 있었습니다.단순히 디자인을 "그대로 구현하는" 수준을 넘어,시스템화된 UI를 구성하는 구조적인 접근이 요구되고 있다는 점이 인상 깊었습니다.이번 글에서는 그런 흐름들을 공부하면서 UI개발자 관점에서 주목할 만했던 웹 트렌드 키워드 5가지를 정리해 보았습니다. 기능 소개보다는 실무에 어떻게 연결될 ..

들어가며최근 AI 코드 에디터를 업무에 자주 활용해 볼 수 있는 기회가 제공되어 커서를 이리저리 체감해 볼 수 있었습니다. 그중 Notepads(이하 노트패드)라는 기능을 마주하게 되었는데, 아직 베타 버전이다 보니 인터넷을 검색해도 정보가 많지 않아 어떤 기능인지, 어떻게 활용해야 좋은지에 대해 궁금한 점이 생겼고 실무를 통해서 나름의 방법으로 이용해 본 경험을 공유해 보려고 합니다.또한, AI와의 협업이 어떠했는지, 개발자의 입장에서 만나본 바이브 코딩의 경험은 어떤 느낌이었는지도 공유해 보려고 합니다. 노트패드를 경험해 보자아래는 최근 작업을 수행하면서 노트패드를 활용해 본 경험 사례입니다. 이 경험담이 올바른 사용법이 아닐 수 있기에 참고 용도로만 읽어주길 바랍니다.경험 1. 플러그인으로 추출한 ..

프로젝트 리딩 역할에서 하루 10개씩 쌓이는 PR, 어떻게 효율적으로 처리할까?들어가며프로젝트 리딩을 담당하는 PL 역할을 하다 보니 하루에도 수많은 PR을 리뷰해야 하는 상황에 직면하게 됩니다. 많게는 하루에 10개 정도의 PR이 쌓이는데, 각 PR을 꼼꼼히 리뷰하다 보면 상당한 시간이 소요됩니다. 이는 단순히 시간 문제를 넘어 다른 업무에 지장을 주거나, 리뷰 품질이 저하될 수도 있고, 리뷰를 기다리는 작업자의 작업 속도 저하로 이어질 수 있습니다.이런 문제를 해결하기 위해 다양한 자동화 도구와 프로세스를 도입했고, 그 결과 PR 리뷰 시간을 효과적으로 단축할 수 있었습니다. 이번 글에서는 실제로 적용한 세 가지 핵심 전략에 대해 공유하고자 합니다. PR 템플릿으로 사전 체크리스트 구축PR 템플릿 도..

1. View Transitions API를 주목하는 이유SPA(Single Page Application)는 빠른 전환과 데이터 중심의 UI에 강점이 있지만, 페이지 전환이 지나치게 갑작스럽거나 "툭" 끊기는 느낌을 줄 수 있습니다. 지금까지는 이런 부분을 CSS opacity, transform, 또는 JavaScript로 수작업 애니메이션을 구현해 해결해 왔죠.하지만 다음과 같은 문제점이 있었습니다.구성 요소가 바뀌는 구조에서 애니메이션이 어렵고관리도 복잡하고성능도 보장되지 않습니다.그래서 등장한 것이 바로 View Transitions API입니다.CSS/JS 수작업 애니메이션의 번거로움을 해결SPA 구조에서 전환 흐름을 부드럽게 연결브라우저가 상태 전환 전/후의 시각 요소를 감지하고 자동으로 애..