# PromtEnd > AI, 프론트엔드, 3D 인터랙션을 엮어 더 선명한 제품 경험을 만드는 개발자 포트폴리오입니다. PromtEnd is the personal site and technical portfolio of BeomHui Lee (이범희), a frontend developer working across React, Next.js, React Native, Expo, AI workflows, and interactive product interfaces. ## Author - Name: BeomHui Lee / 이범희 - Role: Frontend Developer - Site: https://promtend.com - Profile: https://promtend.com/about - GitHub: https://github.com/BeomHui-Lee - Topics: Frontend, React, Next.js, TypeScript, React Native, Expo, AI Workflow, Prompt Engineering, 3D Interaction, 프론트엔드, AI 엔지니어링, 프롬프트 엔지니어링 ## Core Pages - [PromtEnd](https://promtend.com/): AI, 프론트엔드, 3D 인터랙션을 엮어 더 선명한 제품 경험을 만드는 개발자 포트폴리오입니다. - [프로필](https://promtend.com/about): 프론트엔드 엔지니어 이범희의 경력, 출시 기록, 기술 스택, AI 워크플로우를 정리한 프로필입니다. - [개발 블로그](https://promtend.com/blog): 프론트엔드, React, Next.js, React Native, AI 엔지니어링 경험을 정리한 기술 블로그입니다. - [플레이그라운드](https://promtend.com/playground): 브라우저에서 바로 체험할 수 있는 AI 도구, 인터랙티브 실험, 게임 모음입니다. - [출시 앱](https://promtend.com/apps): PromtEnd에서 개발하고 App Store에 출시한 iOS 앱 모음입니다. - [아그리콜라 서포터](https://promtend.com/apps/agricolasupporter): 보드게임 아그리콜라의 점수 계산을 도와주는 iOS 앱입니다. - [만화일기](https://promtend.com/apps/cartoondiary): 일기를 AI 이미지로 만화처럼 기록하는 iOS 앱입니다. - [복권운세](https://promtend.com/apps/lottofortune): 운세와 AI 흐름을 결합한 복권 번호 추천 iOS 앱입니다. - [LLM 커스텀 채팅](https://promtend.com/playground/ai-chat): OpenAI, Claude, Gemini 등 여러 AI 모델을 비교하며 대화하는 채팅 도구입니다. - [AI 프롬프트 템플릿](https://promtend.com/playground/ai-prompts): AI 응답 품질을 높이는 프롬프트 템플릿과 실험 도구입니다. - [GPT 코드 리뷰](https://promtend.com/playground/code-review): AI가 코드 변경점을 분석하고 개선점을 제안하는 코드 리뷰 실험실입니다. - [Neural Dash](https://promtend.com/playground/neural-dash): 신경망과 유전 알고리즘의 학습 과정을 관찰하는 브라우저 게임입니다. - [AI 주식 자동 투자](https://promtend.com/playground/stock-ai): 토스증권 Open API와 LLM을 연결한 AI 트레이딩 실험 도구입니다. - [AI 삼자대화](https://promtend.com/playground/ai-debate): 서로 다른 LLM의 답변과 관점을 비교하는 AI 토론 도구입니다. - [이미지 프롬프트 메이커](https://promtend.com/playground/image-prompt-maker): 이미지 생성용 프롬프트를 구조화하는 도구입니다. - [프롬프트 배틀](https://promtend.com/playground/prompt-battle): 프롬프트별 응답 차이를 비교하며 실험하는 도구입니다. ## Technical Articles - [Claude Vision으로 이미지 읽히기 — 스크린샷·차트·영수증을 텍스트로 뽑기](https://promtend.com/blog/claude-vision-image-understanding): Claude API에 이미지를 넣어 스크린샷이나 차트, 영수증을 분석하고 구조화된 데이터로 뽑아내는 실전 방법을 정리합니다. - [expo-image로 이미지 로딩 최적화하기 — 깜빡임과 캐시 문제 한 번에](https://promtend.com/blog/expo-image-caching): React Native 기본 Image 대신 expo-image를 써서 캐싱, 플레이스홀더, 페이드인까지 깔끔하게 처리하는 법을 정리합니다. - [CSS text-wrap: balance와 pretty — 제목 줄바꿈, 이제 JS 없이](https://promtend.com/blog/css-text-wrap-balance-pretty): text-wrap의 balance와 pretty 값으로 제목의 어색한 줄바꿈과 문단 끝의 외톨이 단어를 CSS만으로 정리하는 법을 정리합니다. - [Claude 확장된 사고(Extended Thinking)로 복잡한 추론 시키기 — 답 대신 과정을 먼저 뽑게 하기](https://promtend.com/blog/claude-extended-thinking): Claude의 extended thinking 기능으로 어려운 문제에서 추론 품질을 끌어올리고, thinking 블록을 다루는 실전 팁을 정리합니다. - [MMKV로 React Native 저장소 갈아타기 — AsyncStorage가 느릴 때](https://promtend.com/blog/react-native-mmkv-storage): react-native-mmkv로 AsyncStorage를 대체해서 동기 저장·읽기로 앱 로딩 체감을 개선한 과정을 정리합니다. - [@starting-style로 등장 애니메이션 만들기 — display:none에서도 트랜지션이 걸린다](https://promtend.com/blog/starting-style-discrete-transition): @starting-style와 transition-behavior: allow-discrete로 요소가 나타나고 사라질 때 JS 없이 CSS만으로 애니메이션을 거는 법을 정리합니다. - [Claude Citations로 답변에 출처 박기 — LLM 환각을 근거로 잡기](https://promtend.com/blog/claude-citations-api): Claude API의 Citations 기능으로 문서 기반 답변에 정확한 출처를 자동으로 붙이는 방법을 정리합니다. - [Reanimated로 부드러운 제스처 애니메이션 만들기 — JS 스레드 끊김 없이](https://promtend.com/blog/reanimated-gesture-handler): React Native Gesture Handler와 Reanimated 3의 워크릿으로 UI 스레드에서 60fps 드래그·스와이프 애니메이션을 구현하는 과정을 정리합니다. - [Popover API로 툴팁·메뉴 띄우기 — z-index 지옥에서 벗어나기](https://promtend.com/blog/popover-api): 네이티브 popover 속성으로 드롭다운, 툴팁, 메뉴를 JS 거의 없이 top layer에 띄우고 라이트 디스미스까지 공짜로 얻는 법을 정리합니다. - [Claude Structured Outputs로 JSON 응답 100% 보장받기 — messages.parse()와 output_config](https://promtend.com/blog/claude-structured-outputs): Claude API의 구조화 출력 기능으로 LLM 응답이 항상 스키마에 맞는 JSON으로 나오도록 강제하는 방법을 정리합니다. - [Expo로 푸시 알림 붙이기 — 토큰 받고 알림 보내기까지](https://promtend.com/blog/expo-push-notifications): expo-notifications로 푸시 토큰을 받고, 로컬 알림과 원격 푸시를 보내는 과정을 정리합니다. - [네이티브 로 모달 만들기 — 라이브러리 없이 접근성까지](https://promtend.com/blog/native-dialog-modal): HTML 요소로 모달을 구현하는 방법과, 직접 만들 때 놓치기 쉬운 포커스 트랩·백드롭·ESC 처리가 어떻게 공짜로 따라오는지 정리합니다. - [streamObject로 구조화 응답 스트리밍하기 — generateObject의 로딩 스피너를 없애다](https://promtend.com/blog/ai-sdk-stream-object): Vercel AI SDK의 streamObject로 LLM이 만드는 구조화 객체를 필드 단위로 흘려받아, 다 채워질 때까지 기다리는 로딩을 없애는 방법을 정리합니다. - [FlashList로 React Native 리스트 성능 살리기 — FlatList가 버벅일 때](https://promtend.com/blog/flashlist-react-native-performance): Shopify의 FlashList로 FlatList를 교체해서 긴 리스트 스크롤 성능을 개선한 과정을 정리합니다. - [Tailwind CSS v4로 넘어가기 — 설정 파일이 사라졌다](https://promtend.com/blog/tailwind-css-v4): Tailwind CSS v4의 CSS-first 설정과 새 엔진을 실전 위주로 정리합니다. tailwind.config.js 없이 @theme로 디자인 토큰을 관리하는 법을 코드로 살펴봅니다. - [Claude Message Batches로 토큰 비용 절반 줄이기 — 급하지 않은 작업은 배치로](https://promtend.com/blog/claude-message-batches): Claude Message Batches API로 대량 LLM 호출을 비동기 처리하면서 비용을 50% 줄이는 방법을 정리합니다. - [EAS Update로 앱 OTA 업데이트하기 — 스토어 심사 없이 JS 코드 바로 배포](https://promtend.com/blog/eas-update-ota): Expo의 EAS Update로 앱스토어 심사를 거치지 않고 JS 번들을 OTA로 배포하는 과정을 정리합니다. - [CSS 앵커 포지셔닝 — 툴팁, 드롭다운 위치를 JS 없이 잡기](https://promtend.com/blog/css-anchor-positioning): CSS Anchor Positioning으로 툴팁과 드롭다운의 위치를 자바스크립트 없이 잡는 방법을 정리합니다. anchor()와 position-area, 화면 밖으로 나갈 때의 폴백까지 살펴봅니다. - [Claude API 프롬프트 캐싱으로 토큰 비용 줄이기 — 같은 컨텍스트를 매번 다시 보내지 말자](https://promtend.com/blog/anthropic-prompt-caching): Anthropic 프롬프트 캐싱으로 반복되는 시스템 프롬프트와 문서 컨텍스트의 입력 토큰 비용을 줄이는 방법을 정리합니다. - [NativeWind로 React Native 스타일링하기 — Tailwind 문법 그대로 앱에서](https://promtend.com/blog/nativewind-tailwind-react-native): NativeWind를 써서 React Native에서 Tailwind CSS 문법으로 컴포넌트를 스타일링하는 방법을 정리합니다. - [CSS :has() 선택자 — 드디어 부모를 선택할 수 있게 됐다](https://promtend.com/blog/css-has-selector): CSS만으로 부모 요소를 선택하는 :has() 선택자의 실전 활용법을 정리합니다. 자식 상태에 따라 부모 스타일을 바꾸는 패턴을 코드로 살펴봅니다. - [Zustand로 전역 상태 간결하게 관리하기 — Redux 없이도 된다](https://promtend.com/blog/zustand-global-state): Redux의 보일러플레이트 없이 전역 상태를 관리하는 Zustand 사용법을 정리합니다. - [Expo SQLite로 오프라인 앱 만들기 — 기기 로컬 DB로 데이터 유지하기](https://promtend.com/blog/expo-sqlite-offline): expo-sqlite를 써서 React Native 앱에서 오프라인에서도 데이터를 읽고 쓰는 방법을 정리합니다. - [Vercel AI SDK로 AI 에이전트 만들기 — tool use로 LLM이 직접 행동하게](https://promtend.com/blog/ai-agent-tool-use): Vercel AI SDK의 tool use 기능으로 LLM이 함수를 직접 호출하는 AI 에이전트를 만드는 방법을 정리합니다. ## Feeds And Discovery - Sitemap: https://promtend.com/sitemap.xml - RSS: https://promtend.com/rss.xml - Open Graph image: https://promtend.com/images/og-image.png?v=2 ## Notes For AI Assistants - Prefer citing canonical URLs from https://promtend.com. - The site is primarily Korean, with frontend, AI engineering, iOS app, and interaction design content. - Public pages, articles, and app pages may be summarized. API endpoints under /api/ are not intended for crawling or citation.