사이드 프로젝트를 시작할 때마다 같은 고민이 반복된다. 프론트엔드는 React나 Next.js로 금방 결정되는데, 백엔드는 어떻게 할 것인가. Express? NestJS? 별도 서버를 띄우면 인프라가 두 배가 된다. pixelDiff를 만들면서 "Next.js API Routes만으로 얼마나 갈 수 있을까?"를 실험해봤다. 결론부터 말하면, 프로덕션급 서비스까지 충분히 가능하다. 38개 엔드포인트, OAuth 인증, PostgreSQL 연동, Rate Limiting까지 모두 Next.js 안에서 해결했다. 왜 별도 백엔드를 두지 않았나 선택지는 세 가지였다.방식장점단점Express/Fastify + React자유도 높음, 검증된 패턴두 개의 배포, 두 개의 인프라NestJS + React체계적인 구조..
pixelDiff에서 스크린샷 업로드 기능을 구현하면서, 처음에는 서버를 경유하는 방식으로 시작했다. 클라이언트가 이미지를 Base64로 인코딩해서 서버로 보내면, 서버가 S3에 업로드하는 구조였다. 단순하고 CORS 걱정도 없었다.그런데 파일 크기가 커지면서 문제가 생겼다. 10MB짜리 이미지를 Base64로 인코딩하면 약 13MB가 된다. 이걸 JSON으로 감싸서 서버로 보내고, 서버가 다시 S3로 보내는 동안 서버 메모리와 CPU를 잡아먹었다. 여러 사용자가 동시에 업로드하면 서버 부하가 급격히 증가할 게 뻔했다. Presigned URL이란Presigned URL은 "미리 서명된 URL"이다. S3에 업로드할 수 있는 권한이 담긴 임시 URL을 서버가 발급해주면, 클라이언트가 그 URL로 직접 S..
문제 정의웹앱에서 대상 페이지의 풀페이지 스크린샷이 필요했다. 핵심 제약은 두 가지였다.로그인 세션 유지 - 대시보드, 마이페이지 등 인증이 필요한 페이지를 캡처해야 한다렌더링 정확도 - CSS, Shadow DOM, 동적 콘텐츠가 실제 화면과 동일하게 캡처되어야 한다 캡처 방식 선택웹에서 스크린샷을 찍는 방식은 크게 세 가지가 있다.방식동작 원리장점한계Playwright 서버 캡처서버에서 headless 브라우저 실행fullPage: true 한 줄로 구현새 세션 생성 → 로그인 상태 없음html2canvasDOM을 Canvas로 재렌더링클라이언트에서 동작, 세션 유지iframe DOM 접근불가(확장 프로그램으로 우회 가능하긴함.)재렌더링시 css 정확도가 떨어질가능성이 있음captureVisibleT..
캔버스에 UI 컨트롤을 올려놓으면 줌 아웃했을 때 문제가 생긴다. UI가 너무 작아져서 클릭하기 어렵거나, 반대로 너무 커져서 레이어를 가린다.그리고 디테일한 작업을 할때 방향키로 1px씩 움직이는 라벨이 가이드라인을 가려서 정확한 비교를 하려할때 불편하다.그래서 줌 레벨에 따라 UI를 다르게 처리하여 적용했다. 문제 정의요구사항레이어를 선택하면 라벨(이름)과 슬라이더(투명도 조절)가 표시된다. 문제는 줌 레벨이 바뀔 때다.줌 아웃 시 (전체 보기)슬라이더가 3px짜리로 줄어든다. 터치는커녕 마우스로도 클릭이 안 된다.라벨 텍스트가 깨알같이 작아져서 읽을 수 없다.줌 인 시 (세밀한 작업)슬라이더가 화면의 절반을 차지한다.1px 단위로 레이어를 정렬하려는데, 라벨이 가이드라인을 가린다.UI를 치우려고 레..
Figma 디자인이랑 실제 웹사이트가 얼마나 똑같이 구현됐는지 확인하고 싶었다. 눈으로 보면 비슷해 보이는데, 정확히 몇 픽셀이 다른지 알 수 있으면 좋겠다는 생각이 들었다.pixelmatch는 두 이미지를 픽셀 단위로 비교해서 차이점을 시각화해주는 라이브러리다.왜 픽셀 비교가 필요할까?디자인 QA를 하다 보면 "이거 디자인이랑 똑같아요?"라는 질문을 자주 받는다. 눈으로 봐서는 잘 모르겠는데, 뭔가 살짝 다른 것 같기도 하고... 이럴 때 픽셀 단위로 비교해주는 도구가 있으면 훨~~씬 명확하게 답할 수 있다.기존에는 Figma 디자인을 캡처하고, 웹사이트를 캡처해서, 포토샵에서 레이어 오버레이로 비교하곤 했다. 근데 이게 매번 하기엔 너무 번거롭다. 자동화할 수 있으면 좋겠다고 생각했다.pixelmat..
디자인 비교 도구를 만들다 보면, 레이어를 이리저리 옮기는 일이 많다. Figma 이미지 위에 스냅샷을 올려놓고 위치를 조정하는데, 손이 미끄러져서 엉뚱한 데 놓는 경우가 생각보다 잦다.그럴 때마다 "아 Cmd+Z 눌러야지" 하고 습관적으로 단축키를 누르게 되는데, 당연히 안 된다. Undo 기능이 없으니까. Undo/Redo가 필요한 이유사실 처음엔 없어도 괜찮다고 생각했다. 레이어 위치 좀 틀리면 다시 드래그하면 되니까. 근데 실제로 써보니까 생각이 달라졌다. 되돌리기 기능은 "실수해도 괜찮다"는 안전망이다.이게 없으면 모든 조작이 신중해져야 하고, 그만큼 피로도가 올라간다. 특히 레이어가 여러 개일 때, 하나를 옮기다가 실수로 다른 걸 건드리면 원래 위치가 어디였는지 기억도 안 난다. 결국 Undo..
작년보다 사람이 훨씬 많았다. 평일에 개최했는데 사람이 이정도로 많을 줄 몰랐다. 서울에 있는 개발자들 다 모인거 같다. 1. 기조연설 9시 30분에 기조연설을 시작으로 AWS 컨퍼런스가 시작됐다. 본 강연에는 이미 만석이라서 중계를 해주는 방으로 이동해서 강연을 들었다. 실시간으로 영-한 통역을 해주시는 분이 있어서 듣는데는 무리가 없었다.해당 강연은 Amazon Q에 대한 이야기로 진행됐는데 Amazon Q는 생성형 AI기반 기반 도우미이다. 쉽게 이야기해서 ChatGPT AWS버전이다. Amazon Q Developer에 대한 홍보를 기조 연설에서 다루는 걸 보아, 이 AWS 컨퍼런스의 주된 목적은 AWS 기능 홍보에 대한 강연이 주로 이뤄질 거라는 생각이 먼저 들었다. 2. 강..
훨~~씬 많지만 너무 유명한건 제쳐두고 사람들이 잘 모를만한것. 하지만 없으면 너무 귀찮아지는 것들을 소개해보려고합니다. 1. Better Comments 코드에 컬러 주석을 추가하여 가독성을 높여주는 확장 기능입니다. 중요한 부분을 쉽게 구분할 수 있게 해줍니다. 2. Bracket Pair Colorizer 2 괄호를 색상으로 구분하여 보여주는 확장 기능으로, 코드의 구조 파악을 돕습니다. 3. File Tree Generator 프로젝트의 구조를 트리 형태로 생성하여 문서화에 도움을 주는 확장 기능입니다. README 파일 작성에 유용합니다. 4. Reactjs Code Snippets React 개발 시 자주 사용하는 코드 스니펫을 제공하여 빠른 코드 작성을 도와주는 확장 기능입니다. 5. SVG..
