tag: Frontend · 37건
- 근거: AI 어시스턴트/챗봇의 감정 표현 UI 레이어 — 프론트엔드 및 AI 에이전트 분야에 해당
- 액션: git clone https://github.com/sam70361/emotion-ball 후 index.html 열어 32종 감정 상태 동작 확인, AI 출력 연동 예시 코드 검토
- 근거: 브라우저 캔버스 기반 툴 개발 시 A4 인쇄 해상도(DPI) 계산 관련 프론트엔드 기술 해설 기사
- 액션:
- 근거: 프론트엔드 개발 관심 분야 - HTML 기능 소개 기사
- 액션: 기사 읽고 잘 모르는 HTML 네이티브 기능 정리해두기
- 근거: 디자인 시스템 + AI 에이전트 기반 UI 빌더로 프론트엔드/AI 관심 분야에 해당하나, Product Hunt 소개 페이지 항목으로 실제 GitHub 저장소가 확인되지 않음
- 액션: producthunt.com 페이지에서 공식 GitHub 링크 확인 후, 오픈소스 여부 및 실제 저장소 구조 검토
- 근거: 이메일 클라이언트의 CSS 파싱 취약점 — 보안/프론트엔드 관심 분야에 해당하는 기술 해설
- 액션: portswigger.net 원문 읽고 이메일 HTML 렌더링 시 CSS 인젝션 공격 벡터 파악하기
- 근거: 프론트엔드/웹 개발 영역 — HTML canvas의 EXIF 메타데이터 손실 동작을 설명하는 기술 아티클
- 액션: 브라우저 이미지 처리 시 exifr 라이브러리로 canvas 통과 전 메타데이터를 미리 추출·보존하는 패턴 메모해두기
- 근거: 프론트엔드 — 브라우저 PDF 처리(pdf-lib) 실전 함정 정리 기술 블로그 글
- 액션: pdf-lib 공식 문서에서 암호화·폰트·대용량 파일 관련 옵션 확인 후 메모
- 근거: 브라우저 FileReader/DataView로 JPEG·PDF 등 바이너리를 클라이언트 사이드에서 파싱하는 프론트엔드 기술 기사
- 액션: 브라우저 DataView API로 JPEG 퀀타이제이션 테이블 파싱 미니 PoC 작성해보기
- 근거: AI 코딩 도구/LLM 프론트엔드 플러그인 생태계로 AI 관심 분야에 해당하나 직접 도입 우선순위는 낮음
- 액션: README 훑어보고 DSH Web UI 플러그인 구조 파악 — 특히 remote mobile UI와 live token stats 기능 확인
- 근거: React 기반 생성형 AI UI 컴포넌트 라이브러리로 프론트엔드/AI 관심 분야에 해당
- 액션: git clone https://github.com/kasturikhanke/generative-loaders 후 examples 폴더 확인 및 스트리밍 텍스트 로더 컴포넌트 로컬 실행 테스트
- 근거: AI 에이전트(agents, evals 디렉터리)로 구현된 웹 애니메이션 생성 도구 — AI/LLM + 프론트엔드 교차 영역
- 액션: git clone https://github.com/oil-oil/oil-motion && cd oil-motion && cat README.en.md && ls agents/
- 근거: 프론트엔드 개발자를 위한 웹 접근성 도구 소개 글 — WCAG 자동 감사 및 시각/운동 장애 시뮬레이션 제공
- 액션: pour 브라우저 확장을 설치해 본인 프로젝트 페이지에 색각이상/저시력 시뮬레이션 실행해보기
- 근거: WebGL 구체 추적(sphere tracing)·서명 거리 필드(SDF) 기법을 다룬 기술 쇼케이스 기사로, 특정 클론 가능한 오픈소스 저장소가 없고 프론트엔드 그래픽스 프로그래밍 기법 소개에 해당
- 액션:
- 근거: Three.js + GPT 기반 3D 인터랙티브 웹 앱 — 프론트엔드/AI 통합 구현 사례로 참고 가치 있음
- 액션: git clone https://github.com/thebuggeddev/anatomy 후 README 및 app/ 구조 확인, Three.js + LLM 통합 패턴 파악
- 근거: Claude Code·Cursor·v0 등 AI 코딩 도구용 프론트엔드 프롬프트 모음 — AI/LLM × 프론트엔드 교차 관심 영역
- 액션: git clone https://github.com/openwarehq/websiteprompts 후 prompts/ 디렉토리 훑어보고 Claude Code에 1~2개 붙여넣어 cinematic 스타일 랜딩 페이지 생성 시험
- 근거: Angular 프레임워크의 lazy resource API 설계 논의로, 프론트엔드/웹 프레임워크 관심 분야에 해당하나 특정 저장소가 아닌 설계 제안 기사
- 액션: Angular resource() API의 lazy loading 설계 논의 원문 읽고 whenTracked vs 명시적 loadValue() 패턴 차이 파악하기
- 근거: 프론트엔드 AI 에이전트용 중국어 사양/가이드라인 문서 저장소 — 프론트엔드·AI 에이전트 두 관심 분야에 걸침
- 액션: git clone https://github.com/oil-oil/oil-frontend 후 agents/ 디렉터리 내 에이전트 프롬프트·규범 문서 훑어보기
- 근거: 브라우저에서 HTML/CSS를 비디오 프레임으로 변환하는 프론트엔드 기법 — 직접 사용할 프로젝트는 없으나 프론트엔드 관심 분야에 해당
- 액션: SVG foreignObject + Canvas 캡처 패턴 코드 읽고 자신의 프로젝트에 DOM-to-image 방식 적용 가능성 메모
- 근거: TypeScript/프론트엔드 생태계의 비동기 유틸리티 라이브러리 — 프론트엔드/백엔드 개발 도구에 해당
- 액션: git clone https://github.com/nyvexis1/temporize 후 README 예제로 debounce+AbortSignal 조합 동작 확인
- 근거: 프론트엔드 — 의존성 없는 웹 컴포넌트 방식의 인라인 마크다운 에디터로, 어떤 프레임워크에도 드롭인 가능한 UI 도구
- 액션: GitHub 저장소(writemark) 클론 후 로컬 HTML 파일에
태그 삽입해 동작 확인
- 근거: 프론트엔드/백엔드 아키텍처 분석 및 측정 도구 — 개발자 도구 및 개발 생산성 영역에 해당
- 액션: git clone https://github.com/gkhan205/arcovia && pnpm install && 샘플 프로젝트에 적용해 아키텍처 의존성 분석 결과 확인
- 근거: TypeScript/Vite 빌드 타겟과 Baseline API 가용성 간의 간극을 설명하는 프론트엔드 개발 기술 아티클
- 액션: typescript-baseline-lib 및 @baseline-types/dom-widely-available 패키지를 찾아보고, 사용 중인 Vite 프로젝트에 별도 tsconfig로 CI 체크 추가 방법 검토
- 근거: WebGL 기반 스티커 제작 도구로 프론트엔드/UI 도구 영역에 해당하며, Next.js·Drizzle·Vite 등 실제 소스 구조를 갖춘 완성도 있는 오픈소스 프로젝트
- 액션: git clone https://github.com/CatsJuice/sticker-forge && npm install && npm run dev 로 로컬 실행 후 WebGL 물리 스티커 인터랙션 확인
- 근거: 프론트엔드 UI 라이브러리 — React/Vue/Svelte/바닐라 지원 WebGL 캔버스 컴포넌트로 관심 분야 프론트엔드에 직접 해당, ★882에 실제 소스(src/, package.json 등) 확인됨
- 액션: git clone https://github.com/DavidHDev/canvas-ui 후 npm install && npm run dev로 컴포넌트 데모 로컬 실행 확인
- 근거: 웹 타이포그래피 라이브러리로 프론트엔드 관심 분야에 해당하나, 링크가 GitHub 저장소가 아닌 소개 사이트이고 즉시 도입할 만큼 범용적이지 않은 특수 목적(행 정렬 알고리즘) 도구
- 액션: justif.lyall.co 및 관련 GitHub 저장소 확인 후, Knuth-Plass 알고리즘이 기존 CSS text-align: justify 대비 어떤 품질 차이를 내는지 데모 페이지에서 비교해보기
- 근거: HTML 안전성·콘텐츠 sanitization 관련 프론트엔드/웹 보안 주제의 의견 글
- 액션: 글 읽고 Reddit이 HTML을 차단한 맥락(XSS 벡터, sanitization 정책 변화) 파악
- 근거: AI/에이전트 UI용 로딩 인디케이터 컴포넌트 — 프론트엔드/UI 컴포넌트 관심 분야에 해당
- 액션: npm install thinking-orbs 후 AI 챗 인터페이스 프로토타입에 적용해 6가지 상태(thinking/loading 등) 시각적으로 확인
- 근거: 프론트엔드 분야 — 웹 인터랙티브 비디오를 위한 새 오픈소스 포맷(TypeScript, 상태머신 내장, 프레임 정확 전환)으로 UI/미디어 경험 구현에 직접 활용 가능
- 액션: git clone https://github.com/pixel-point/aval && examples 디렉터리 실행해 상태머신 기반 인터랙티브 비디오 전환 동작 확인
- 근거: AI 에이전트 기반 비주얼 디자인 시스템 생성 도구로, AI/LLM × 프론트엔드 관심 분야 교차점에 해당
- 액션: git clone https://github.com/ohmiler/gridgeist 후 docs/ 및 evals/ 디렉터리 구조와 AGENTS.md 읽어 에이전트 기반 디자인 시스템 워크플로 파악
- 근거: Rust 기반 GUI 라이브러리 신규 릴리즈 — 개발자 도구/언어 런타임 생태계에 해당
- 액션: 릴리즈 노트 및 HN 댓글 읽고 0.14 주요 변경사항(새 위젯, 성능 개선 등) 파악
- 근거: WebAssembly 기술 경계를 보여주는 실험적 프로젝트 — 프론트엔드/시스템 분야 기술 동향
- 액션: https://github.com/HeyPuter/browser.js 저장소 클론 후 browser-in-browser 구현 방식 확인
- 근거: 프론트엔드/백엔드 관심 분야 — TypeScript 기반 셀프호스팅 가능한 오픈소스 커머스 프론트엔드
- 액션: git clone https://github.com/mobazha/mobazha-unified && apps/ 디렉터리 구조와 README 설치 방법 확인
- 근거: 웹 폼/UI에서 숫자 입력 처리 관련 프론트엔드/UX 기술 블로그 글로 추정
- 액션:
- 근거: LQIP(저품질 이미지 플레이스홀더) 파일 포맷 제안으로 프론트엔드 이미지 최적화 영역에 해당하나, 특정 오픈소스 저장소가 아닌 기술 블로그 글
- 액션: 블로그 글 읽고 Handsum 포맷의 인코딩 방식과 기존 LQIP(BlurHash, ThumbHash 등)와의 차이점 파악
- 근거: 브라우저 전용 클라이언트사이드 PDF 처리 기법(pdf-lib, pdf.js 활용)으로 프론트엔드 관심 분야에 해당하나, 특정 오픈소스 저장소가 아닌 개인 프로젝트 소개 글
- 액션: pdf-lib(github.com/Hopding/pdf-lib) 공식 레포 클론 후 병합·분할·워터마크 예제 로컬 실행 확인
- 근거: AI 에이전트가 구동 가능한 브라우저 기반 비디오 에디터 — AI/LLM 에이전트 도구 및 프론트엔드 도구 관심 분야에 해당
- 액션: git clone https://github.com/ronak-create/FableCut 후 브라우저에서 실행해 AI 에이전트 API 연동 방식 확인
- 근거: 프론트엔드 관심 분야 — 브라우저 외부 환경(임베디드/네이티브)용 JSX UI 프레임워크로 Vue Vapor·Solid 지원 및 Tailwind 디자인 시스템 포함
- 액션: git clone https://github.com/pocket-stack/pocketjs 후 README의 시작 예제 실행해 ‘브라우저 외 렌더링’이 어떤 환경(데스크톱·임베디드·터미널?)을 의미하는지 확인