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 구조에서 전환 흐름을 부드럽게 연결브라우저가 상태 전환 전/후의 시각 요소를 감지하고 자동으로 애..

대규모 언어 모델(LLM)을 기반으로 애플리케이션을 개발하기 위한 첫걸음들어가며최근 AI 개발이나 LLM(Large Language Model)을 활용한 서비스 개발이 급속히 증가하면서 팀과제나 학습에서 개인적으로 관심을 갖게된 기술중 하나가 바로 LangChain입니다 이번 글에서는 LangChain의 개념과 활용 방법, 그리고 왜 AI 개발에 LangChain이 유용한지 가볍게 알아보려 합니다.랭체인(LangChain)이란?LangChain은 다양한 언어 모델을 쉽게 연결하여 자연어 처리를 기반으로 하는 애플리케이션을 구축할 수 있게 도와주는 도구입니다. 간단히 말하면, 여러 가지 도구나 API, 데이터베이스 등을 언어 모델과 쉽게 결합하여 더욱 강력하고 유용한 AI 서비스를 만들 수 있도록 지원하는..

들어가며Next.js 환경의 프론트엔드 프로젝트 경험을 되돌아보며, 사전에 좀 더 깊게 고려했으면 좋았을 보안 관련 내용들을 알아보고 정리해 보려 합니다. XSS 공격⬇️ 설명XSS 공격은 가장 흔한 공격 중 하나로 입력 필드나 URL 파라미터 등을 통해 스크립트를 코드에 삽입하고 다른 사용자의 브라우저에서 해당 스크립트가 실행되도록 만드는 공격입니다. 쿠키 탈취, 하이재킹 등 심각한 문제로 이루어질 수 있습니다.XSS 유형을 아래처럼 3가지로 나눌 수 있습니다.Reflected XSS악성 스크립트를 URL 파라미터나 다른 입력값에 포함해 사용자에게 전달하고, 사용자가 이 악성 스크립트가 포함된 URL을 클릭하거나 폼을 제출하면 서버가 해당 스크립트를 응답 페이지에 그대로 포함해 사용자의 브라우저에서 실..

들어가며요즘 유행인 MCP에 대해 소개합니다. MCP (모델 컨텍스트 프로토콜) 이란?MCP(Model Context Protocol)는 AI 모델이 외부 데이터 소스 및 도구와 안전하게 통합될 수 있도록 하는 개방형 프로토콜입니다.AI 시스템이 단순히 텍스트를 생성하는 것을 넘어 필요한 정보를 실시간으로 가져오고 다른 소프트웨어나 데이터 시스템과 협업할 수 있도록 지원하여 AI 모델의 성능과 실제 활용도를 높이는 데 기여합니다.Anthropic에서 오픈 소스로 공개한 이 기술은 AI 모델이 다양한 데이터 소스 및 도구에 표준화된 방식으로 연결될 수 있도록 지원하며, AI 생태계에서 'USB-C 포트'와 같은 역할을 수행합니다.https://www.anthropic.com/news/model-contex..