들어가며저는 마크업과 프론트엔드 작업을 하고 있어서 파이썬을 사용할 일이 없었습니다. 그러다 팀 과제를 하면서 제가 작성한 코드가 제대로 동작하는지 테스트해보고 싶어졌고, 방법을 찾다가 파이썬을 알게 되었습니다. 처음엔 낯선 언어여서 AI의 도움을 받아 코드를 작성하고 테스트를 해봤는데 결과를 바로바로 확인할 수 있어서 정말 편하더라고요. 그러면서 파이썬이 궁금해져서 알아보기 시작했습니다.작업하면서 저처럼 스쳐 지나가듯 파이썬을 경험해 보신 분들이나, 저처럼 아예 몰랐던 분들께 조금이나마 도움이 될까 싶어 공부한 내용을 정리해봤습니다.(참고로 저는 "100 Days of Code: The Complete Python Pro Bootcamp"라는 강의를 듣고 있습니다.) 파이썬 설치하기코드를 작성하려면 먼..

들어가며GEONIQ(SEO/GEO(AI Engine Optimization)를 분석해주는 서비스) 개발에 저도 같이 참여하게 되었는데 프론트엔드는 Next.js의 App Router, 백엔드는 FastAPI로 구성되어 있어 프론트엔드에서 백엔드 API를 호출할 일이 많았습니다.처음에는 프론트엔드에서 백엔드를 직접 호출하는 단순한 구조로 시작했지만, 개발을 진행하면서 CORS 문제라든지, 작업 환경에 따라 URL이 각각 바뀌는 것에 의해 필연적으로 ”중간에 서버인 Proxy 서버 ”가 필요해 졌습니다. 이 글은 Next.js API Routes를 활용해 API 프록시 레이어를 만들게 된 과정과, 만들고 나서 느낀 점을 이야기해 보려고 합니다프론트엔드가 백엔드를 직접 호출하면 안 되나?실제로 많은 프로젝트가..

들어가며개발 생태계의 변화가 무섭습니다.이제는 단순한 '도구의 진화'를 넘어섰죠.AI 에이전트가 코드를 짜는 수준을 넘어 직접 PR을 올리고 작업을 수행하는 모습을 보며, 바이브 코딩을 곁들인 대'딸깍'의 시대가 된 것 같아요.이제 개발자가 고민해야 하는 것은 "어떻게 코드를 짤 것인가"가 아니라 "어떤 문제를 정의하고, AI가 내놓은 답을 어떻게 검증할 것인가"라는 본질적인 질문에 대한 답일거에요. 좁아진 취업문요즘 시장은 기묘한 양극화를 보이고 있습니다. 하버드 연구에 따르면 AI 도입 이후 주니어 채용은 약 10% 감소한 반면, 시니어 수요는 여전하다고 해요. "가르쳐야 하는 신입보다 AI 에이전트가 가성비 좋다"는 냉혹한 논리가 현장을 지배하기 시작한 것 같아요.이제는 문턱이 매우 높아졌어요.이제..

들어가며그동안 접근성에 관련하여 체크리스트와 적용 사례 그리고, 자가진단을 공유하였습니다.웹 표준을 준수하고, 논리적인 마크업과 기능 구현을 하게 된다면 대부분의 접근성 관련한 항목은 신경쓰지 않아도 될 정도로 지켜지게 되는데요. 그럼에도 불구하고 작업 중 실수도 발생할 수 있고 미처 신경쓰지 못하는 부분도 있기 마련입니다.더불어 현재 진행하고 있는 프로젝트는 매년 접근성 인증마크를 갱신하고 있긴 하나 굉장히 오래되고 규모가 큰 사이트로서 아무리 기존에 잘 운영해왔던 사이트라 하여도 문제가 되는 부분은 많을거라 생각이 되었습니다.이번에 프로젝트를 이끌며, 25년도 접근성 인증마크 갱신을 진행 하면서 경험한 실무에서의 주의할 점과 좀 더 신경써야 할 부분을 정리해 보았습니다. role="tab" 사용 시 ..

들어가며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 문제점은 어..