프런트엔드 작업에는 오후 시간을 잡아먹는 작고 성가신 문제가 가득합니다. flex 레이아웃이 말을 듣지 않거나, 컴포넌트에 접근성을 적용해야 하거나, 모바일에서만 나타나는 반응형 버그가 생기는 경우처럼 말이죠. 일반적인 챗봇에 물으면 여러분의 프레임워크를 무시하고 다른 부분까지 망가뜨리는 코드 조각을 받게 됩니다. 프런트엔드 개발에 Claude 활용하기를 제대로 하려면 추상적인 JavaScript만 아는 것이 아니라 React, CSS, 브라우저의 특이한 동작까지 이해하는 무언가와 함께 작업해야 합니다. 진정한 AI 프런트엔드 개발자는 새 컴포넌트를 만들기보다 여러분의 컴포넌트에 맞는 코드를 작성합니다.
Lena는 스택의 프런트엔드 영역을 위해 만들어졌습니다. 한 번 Claude, ChatGPT 또는 어떤 AI 채팅에 불러오면 여러분의 프레임워크와 코딩 관례에 맞춰 작업하는 프런트엔드 페르소나입니다. 다음과 같은 작업을 가장 잘 처리합니다.
“이 컴포넌트 만들어 줘”
컴포넌트를 설명하거나 디자인을 붙여 넣으면 Lena는 일회성 덩어리가 아니라 합리적인 상태, props, 구조를 갖춘 형태로 여러분의 프레임워크에서 구현합니다. 접근성을 나중에 덧붙이는 대신 기본값으로 적용해 라벨, 역할, 키보드 처리까지 포함합니다. 접근성을 사후에 보완하는 방식이 더 많은 비용이 들기 때문입니다.
“이 레이아웃이 왜 깨지지?”
마크업과 CSS를 붙여 넣으면 Lena는 추측하는 대신 실제 원인을 파악합니다 - 접힌 flex 자식, 영역 밖으로 벗어나는 여백, z-index 함정 같은 문제를 찾아냅니다. 다음번에는 직접 해결할 수 있도록 수정 방법을 설명하며, 코드 자체의 버그와 우회해야 하는 브라우저 특유의 문제를 구분할 줄 압니다.
“이 반응형 / 더 빠르게 / 더 깔끔하게 만들어 줘”
복잡하게 얽힌 컴포넌트를 읽기 쉽게 리팩터링하고, 다시 작성하지 않고도 고정 레이아웃을 반응형으로 바꾸며, 불필요한 재렌더링, 지나치게 큰 이미지, 레이아웃 스래싱처럼 성능을 개선할 수 있는 분명한 지점을 짚어냅니다 - 강의를 늘어놓지 않고 실용적인 개선 방법을 설명합니다.
최대한 활용하기
처음부터 프레임워크와 스타일링 방식을 명시하세요 - React와 Tailwind는 일반 CSS와는 다른 답을 요구합니다. 코드를 설명하거나 오류를 묘사하지 말고 실제 코드와 실제 오류를 붙여 넣으세요. 그리고 무엇을 할지뿐 아니라 왜 그런지도 물어보세요. 그래야 각 수정이 다음번에 조금 덜 막히게 해 줍니다.
대상 사용자
프런트엔드 및 풀스택 개발자, 직접 UI를 구축하는 창업자, 코드 영역으로 확장하는 디자이너, 그리고 프런트엔드 개발을 배우는 모든 사람을 위한 Skill입니다. Claude, ChatGPT 또는 system prompt를 지원하는 모든 AI 채팅에서 사용할 수 있습니다. 나머지 개발 과정은 기술 및 개발 Skill 컬렉션에서 풀스택 코딩, 아키텍처, 코드 리뷰를 다룹니다 - 각각 범용 챗봇이 아닌 특정 작업에 집중한 어시스턴트입니다.
파일 하나를 AI에 넣으면 컴포넌트를 만들고, 레이아웃을 디버깅하며, 프레임워크에서 CSS를 리팩터링합니다 - 누구나 접근할 수 있도록 설명도 제공합니다. 구독 없이 영구적으로 사용할 수 있습니다.
Lena 보기 →
