웹솔루션개발 26년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] AI 시대 인력 이동의 그래프를 보여주는 사이트 7min.ai/exodus

해피CGI윤실장 — Fri, 26 Jun 2026 09:06:54 +0900

상단에 타임라인이 있으며, 기간에 대하 조회가 가능하며,

그에 따라 이동 경로가 그래프로 나타납니다.

앤트로픽 에서 딥마인 등으로 인력이 이동한걸 확인할 수 있습니다.
재미로 AI 시대 인력 이동이 어떻게 이뤄지는지 확인해 보시면 되겠습니다.

[해피CGI][cgimall] Cursor Ver 3 : AI 기반 코드 편집기

해피CGI윤실장 — Thu, 25 Jun 2026 09:13:49 +0900

AI 코딩 편집기로 사랑 받고 있는 커서가 버전 3 으로 업데이트 되었습니다.

버전 3 으로 업데이트 되면서

위의 새로운 기능들이 추가 되었습니다.

https://cursor.com/ko/blog/cursor-3

자세한 내용은 위의 링크에서 확인이 가능합니다.

에이전트 중심으로 인터페이스 개선도 이뤄졌습니다.

무료 플랜도 있으니, 제한된 Agent 로 취미용으로 사용해 보시기 바랍니다.

[해피CGI][cgimall] AI 캐릭터와 대화하고, 이야기를 만들어가는 차세대 AI 소셜 챗 플랫폼 – Polybuzz AI

해피CGI윤실장 — Wed, 24 Jun 2026 09:10:06 +0900

Polybuzz AI는 일반적인 챗봇이 아니라 수천만 개의 AI 캐릭터와 대화하고직접 캐릭터를 만들어 스토리·롤플레이·대화 경험을 즐기는 AI 기반 소셜 인터랙션 플랫폼입니다.

주요 기능

1. AI 캐릭터 채팅 (핵심 기능)

2. 캐릭터 생성 & 커스터마이징

3. 롤플레이 & 스토리 진행

4. 음성 & 이미지 기능

5. 장기 기억 & 관계 형성

6. 포인트 & 코인 시스템

구독료

- 무료 플랜 : 기본 채팅 가능, 일부 캐릭터 사용 가능

- 유료 플랜 : 월 7 ~ 20달러 : 광고제거, 고급 AI 모델, 장기 기억 등 상위 기능 제공

장점

1. 캐릭터 기반 몰입감

2. 자유도 높은 대화

3. 무료 진입 가능

4. 커뮤니티 & 캐릭터 생태계

Polybuzz ai는 업무나 생산성을 높이는 플랫폼은 아니고, AI 캐릭터를 생성해서 대화하고 노는 엔터테인먼트 AI입니다.

[해피CGI][cgimall] 실무 중심 AI 서비스 Kimi AI

해피CGI윤실장 — Tue, 23 Jun 2026 09:05:32 +0900

대용량 문서 처리부터 업무 자동화까지 실무에 바로 쓰는 차세대 AI 플랫폼, Kimi AI

주요 기능

1. 초장문 문서 분석

PDF, 계약서, 보고서 등 대용량 문서 처리

문서 간 비교 및 분석

2. 코드 생성 및 개발 지원

PHP, Python, JavaScript 등 다양한 언어 지원

기존 코드 분석 및 개선

반복 개발 작업 자동화

3. 업무 자동화 (AI Agent)

자료 조사 → 정리 → 결과 생성까지 자동 수행

반복 업무 최소화

생산성 극대화

4. 콘텐츠 생성

상품 설명, 블로그, 마케팅 문구 생성

대량 콘텐츠 빠른 제작

일관된 문체 유지

구독료
1. 무료 플랜

2. 유료 플랜 : 10 ~ 30 달러
- 더 긴 문서 처리
- 고성능 모델 사용
- 빠른 응답속도

아주 긴문서는 메이저 AI 보다 유리한점은 있다.

[해피CGI][cgimall] pencere – 이미지·동영상·아이프레임 지원 접근성 갤러리 라이트박스

해피CGI윤실장 — Mon, 22 Jun 2026 09:14:21 +0900

pencere – 이미지·동영상·iframe 지원 접근성 갤러리 라이트박스

※ "pencere"는 터키어로 "창문"이라는 뜻입니다.

# 짧은 설명

JavaScript/TypeScript 기반의 미디어 뷰어 라이브러리로, 이미지·동영상·iframe·커스텀 HTML 콘텐츠를 반응형 갤러리 라이트박스로 표시합니다. View Transitions API를 활용해 썸네일에서 라이트박스로 부드럽게 전환되는 모핑 효과를 제공하며, 프레임워크에 종속되지 않으면서도 React, Vue, Svelte, Solid, Web Components용 어댑터를 모두 지원합니다.

# 라이센스

MIT License (상업적 이용 가능, 자유로운 수정·배포 가능)

# 설치방법

① NPM 설치

npm install pencere

import { PencereViewer } from "pencere"

② CDN 방식

③ JavaScript로 갤러리 생성

const viewer = new PencereViewer({   items: [     { type: "image", src: "/photos/coast.jpg", alt: "Coastal cliffs", caption: "Pacific Coast" },     { type: "image", src: "/photos/forest.jpg", alt: "Redwood forest" },   ],   loop: true,   viewTransition: true,  // 썸네일→라이트박스 모핑 효과   routing: true,         // URL 해시(#p1, #p2)에 슬라이드 위치 기록 })  document.querySelector('#gallery-trigger')   ?.addEventListener('click', (e) => viewer.open(0, e.currentTarget))

④ HTML 선언적 사용 (bindPencere)

HTML 마크업만으로 자동 갤러리 그룹화가 가능합니다.

<a href="/photos/coast.jpg" data-pencere data-gallery="nature" data-caption="Pacific Coast">   <img src="/photos/coast-thumb.jpg" alt="Coastal cliffs" /> </a> <a href="/photos/forest.jpg" data-pencere data-gallery="nature" data-caption="Redwood Forest">   <img src="/photos/forest-thumb.jpg" alt="Redwood forest" /> </a>  <script type="module">   import { bindPencere } from "pencere"   const unbind = bindPencere("[data-pencere]") </script>

⑤ 프레임워크별 사용

React: import { useLightbox } from "pencere/react"
Vue: import { usePencere } from "pencere/vue"
Svelte: import { pencere } from "pencere/svelte" (use: 디렉티브)
Web Component: <pencere-lightbox> 커스텀 엘리먼트 등록

# 중요 옵션

items	표시할 콘텐츠 배열 (type은 image/video/iframe/html)	필수
startIndex	처음 열 슬라이드 인덱스 (0부터)	0
loop	마지막→처음 순환 탐색	false
container	뷰어를 마운트할 특정 DOM 요소	body
strings / i18n	UI 문자열 개별 오버라이드 / 전체 번역 함수	-
keyboard	키 바인딩 재매핑 또는 비활성화	-
image	생성되는 <img>의 crossOrigin, referrerPolicy 설정	-
reducedMotion	애니메이션 정책 (auto / always / never)	auto
useNativeDialog	네이티브 <dialog> 요소로 렌더링	true
lockScroll	뷰어 열림 중 페이지 스크롤 잠금	-
nonce	CSP nonce (구형 브라우저용 fallback <style>에 적용)	-
dir	텍스트 방향 (ltr / rtl / auto)	auto
haptics	터치 디바이스 진동 피드백 활성화	false
routing	URL 해시에 슬라이드 위치 기록 (#p1, #p2…)	false
fullscreen	전체화면 컨트롤 노출 (iOS Safari는 CSS fallback)	false
viewTransition	View Transitions API로 썸네일→뷰어 모핑 활성화	false
renderers	커스텀 콘텐츠 렌더러 등록 (3D 모델 등)	[ ]

옵션명 설명 기본값

주요 API 메서드

viewer.open(index, thumbnailElement)	지정 인덱스로 열기 (썸네일 요소를 두번째 인자로 넘기면 모핑 효과 활성화)
viewer.close()	뷰어 프로그래밍 방식 닫기
viewer.next() / viewer.prev()	다음/이전 슬라이드
viewer.goTo(index)	특정 인덱스로 이동
viewer.openFromLocation()	URL 해시 기반으로 해당 슬라이드 열기
viewer.enterFullscreen() / viewer.toggleFullscreen()	전체화면 진입 / 토글

메서드 설명

라이프사이클 이벤트

willOpen, change, slideLoad, didRender, didNavigate, close (close 시 reason: escape / backdrop / user / api)

# 특징 및 설명

콘텐츠 타입

이미지, 동영상, iframe, 커스텀 HTML을 단일 라이트박스에서 모두 처리
커스텀 렌더러 등록 가능 (예: <model-viewer> 같은 3D 모델 웹 컴포넌트)
<picture> 태그 자동 생성으로 AVIF/WebP 형식 자동 협상 (sources 배열 사용 시)
srcset, sizes로 반응형 이미지 지원
ThumbHash·BlurHash 플레이스홀더 크로스페이드

모션 & 인터랙션

View Transitions API 기반 네이티브 썸네일→라이트박스 모핑 효과
핀치 줌, 더블탭 토글, 마우스 휠 줌, 확대 이미지 드래그 팬
아래로 스와이프해서 닫기 (배경 페이드 효과)
전체화면 API 지원 (iOS Safari는 CSS 고정 위치 오버레이로 fallback)

접근성 (WCAG 2.2 AA 완전 준수)

포커스 관리, 44×44px 터치 타겟, 키보드 사용자용 드래그 대체 수단
IME 안전 키보드 단축키 (한글 등 조합 입력 중에는 단축키 무시)
prefers-reduced-motion 미디어 쿼리 자동 반응
14개 언어 내장 번역 (한국어, 일본어, 중국어 간체, 아랍어 등 포함)
RTL 자동 감지 → 화살표·스와이프·레이아웃 자동 반전 (아랍어·히브리어)

라우팅 & 공유

해시 기반 딥링크: 슬라이드 변경 시 URL fragment(#p1, #p2) 자동 기록
페이지 로드 시 URL 해시 읽어서 해당 슬라이드 자동 오픈
브라우저 뒤로가기 버튼이 뷰어를 닫음 (popstate 감지)
해시 패턴 커스터마이징 가능

보안 & 배포 안정성

Strict CSP 호환: adoptedStyleSheets 사용으로 style-src 우회 (Chrome 73+, Firefox 101+, Safari 16.4+)
구형 브라우저는 nonce 기반 fallback <style> 지원
HTML 캡션용 Trusted Types 정책 헬퍼 제공
SLSA 검증된 npm 릴리스, CDN용 SRI 해시 제공

테마 & 커스터마이징

모든 시각 속성을 CSS 커스텀 프로퍼티로 노출 (--pc-bg, --pc-fg, --pc-font, --pc-focus 등)
어디서든 CSS cascade로 오버라이드 가능

프레임워크 지원

프레임워크 무관 코어 + React, Vue, Svelte, Solid, Web Components용 어댑터 별도 제공
모바일 환경에서 옵션 활성화 시 햅틱 피드백 (Vibration API)

참고 링크

GitHub 원본: https://github.com/productdevbook/pencere
라이브 데모: cssscript.com 데모
demo/demo.html 을 만들어 두었습니다. (cdn 이용하는 방식)

[해피CGI][cgimall] Autumn Note - 위지윅 에디터

해피CGI윤실장 — Fri, 19 Jun 2026 09:14:14 +0900

# 라이센스

MIT License (상업적 이용 가능, 자유로운 수정·배포 가능)

# 특징 및 설명

텍스트 편집

굵게, 기울임, 밑줄, 취소선, 위첨자, 아래첨자
6단계 제목, 인용구, 코드블록 단락 스타일
10종 내장 글꼴(커스텀 글꼴 추가 가능), 줄간격 조절
글자색·형광펜 컬러 픽커, 좌/중/우/양쪽 정렬
순서/비순서/체크리스트 목록, 들여쓰기/내어쓰기
Undo/Redo 히스토리 (단축키 지원)

미디어 삽입

이미지: URL/파일 업로드, base64 임베드 또는 서버 업로드 지원
인라인 이미지 자르기 도구 내장
동영상: YouTube, Vimeo, MP4/WebM/OGG 직접 URL을 반응형 아이프레임·video 태그로 렌더링
표: 그리드 픽커로 직관적 삽입
이모지 픽커: 7개 카테고리 380종 + 키워드 검색
FontAwesome 아이콘 픽커: 스타일·크기·색상 설정 가능

편의 기능

찾기·바꾸기 다이얼로그 (Ctrl+F / Ctrl+H)
우클릭 컨텍스트 메뉴
스크롤 시 상단 고정되는 sticky 툴바
라이트/다크 테마
상태바: 실시간 단어/글자 수 표시 + 드래그로 높이 조절
HTML 소스 보기 모드
localStorage 자동 저장 (auto-save)
읽기 전용 모드
8개 언어 로케일 내장 (한국어 'ko' 포함)
RTL(우→좌) 레이아웃 지원
키보드 단축키 다이얼로그 (Shift+?)

개발자 친화 기능

다중 인스턴스 지원 (페이지당 여러 에디터, 각각 독립 상태)
Bootstrap 4/5 클래스 자동 적용 옵션
Prism.js 자동 연동 코드 하이라이트
붙여넣기 살균 및 Markdown 단축 입력 변환
풍부한 이벤트 시스템 (change, paste, selectionChange, charLimitReached 등)

키보드 단축키

Ctrl + Z	실행 취소(Undo)
Ctrl + Shift + Z / Ctrl + Y	다시 실행(Redo)
Ctrl + B	굵게
Ctrl + I	기울임
Ctrl + U	밑줄
Ctrl + F	찾기 다이얼로그 열기
Ctrl + H	찾기·바꾸기 다이얼로그 열기
Shift + Enter	줄바꿈 삽입
Tab	공백 삽입 / 목록 들여쓰기
Shift + Tab	목록 내어쓰기
Shift + ?	단축키 도움말 다이얼로그

단축키 동작

참고 링크

GitHub 원본: https://github.com/cmm-cmm/Autumn-Note
라이브 데모: cssscript.com 데모

# 설치방법

① 패키지 매니저 설치

npm install autumnnote # 또는 yarn add autumnnote # 또는 pnpm install autumnnote

import AutumnNote from 'autumnnote'; import 'autumnnote/dist/autumnnote.css';

② CDN 방식

③ 기본 사용

const editor = AutumnNote.create('#article-editor', {   // 옵션 설정 });

④ 서버 업로드 처리 예시

const editor = AutumnNote.create('#article-editor', {   onImageUpload(files) {     const payload = new FormData();     payload.append('image', files[0]);     fetch('/media/images/upload', { method: 'POST', body: payload })       .then(res => res.json())       .then(({ url }) => editor.insertImage(url, files[0].name));   }, });

※ FontAwesome이 페이지에 로드되어 있으면 자동 감지되어 FA 아이콘을 사용하고, 없으면 내장 SVG 아이콘으로 대체됩니다.

중요 옵션

placeholder	빈 에디터에 표시할 안내 문구	-
height	초기 높이(px)	200
minHeight / maxHeight	최소/최대 높이(px), 0은 무제한	100 / 0
toolbar	툴바 버튼 그룹 배열로 커스터마이징	전체 버튼
toolbarOverflow	툴바 넘침 처리 ('wrap' 또는 'scroll')	wrap
theme	테마 ('light' 또는 'dark')	light
lang	UI 언어 ('ko', 'en', 'ja', 'zh', 'vi', 'fr', 'de', 'es')	en
direction	텍스트 방향 ('ltr' 또는 'rtl')	ltr
autoSave / autoSaveKey	localStorage 자동 저장 활성화 및 키 지정	false
readOnly	읽기 전용 모드	false
allowImageUpload	이미지 드래그/붙여넣기/업로드 허용	true
maxImageSize	최대 이미지 크기(MB)	5
maxChars / maxWords	최대 글자/단어 수 제한, 0은 무제한	0
pasteAsPlainText	붙여넣기 시 서식 제거	false
pasteCleanHTML	붙여넣기 시 HTML 살균	true
markdownPaste	Markdown 단축 입력을 HTML로 변환	true
stickyToolbar / stickyToolbarOffset	스크롤 시 툴바 상단 고정 및 오프셋(px)	false
useBootstrap / bootstrapVersion	Bootstrap CSS 클래스 적용 (4 또는 5)	false / 5
codeHighlight	Prism.js 자동 로드로 코드 블록 하이라이트	true
colorSwatches	색상 팔레트 앞에 추가할 브랜드 컬러 배열	[ ]
onChange / onFocus / onBlur / onInit	콘텐츠 변경 / 포커스 / 블러 / 초기화 콜백	-
onImageUpload / onImageError	커스텀 업로드 핸들러 / 이미지 거부 콜백	-

옵션명 설명 기본값

주요 API 메서드

editor.getHTML()	살균된 HTML 반환 (폼 제출용)
editor.setHTML(html)	콘텐츠 설정
editor.getText()	평문 텍스트 반환
editor.clear()	콘텐츠 비우기
editor.destroy()	에디터 제거 및 원래 DOM 복원
editor.setDisabled(bool)	에디터·툴바 활성/비활성 전환
editor.on(event, handler) / editor.off(event, handler)	이벤트 리스너 등록/해제

메서드 설명

[해피CGI][cgimall] Cred App Like Tab Bar Interaction 탭메뉴 css 상호작용

해피CGI윤실장 — Thu, 18 Jun 2026 09:06:29 +0900

hover된 메뉴 위치로 배경(span)이 슬라이딩 이동하면서 아이콘과 텍스트가 애니메이션으로 바뀌는 네비게이션 UI 입니다

html

css

해당 사이트 또는 첨부파일에서 원본 소스를 확인할 수 있습니다.

[해피CGI][cgimall] Textarea auto-expand 입력되는 내용에 따라 높이가 조절되는 textarea

해피CGI윤실장 — Wed, 17 Jun 2026 09:06:40 +0900

html

css

사용자의 입력에 따라 높이가 자동으로 조절되는 textarea를 만들 수 있습니다.
입력하는 내용에 맞춰 줄바꿈이 일어날 때마다 textarea의 높이가 자연스럽게 늘어납니다.

해당사이트 또는 첨부파일을 다운로드 받아 소스를 확인할 수 있습니다.

[해피CGI][cgimall] 스크롤 상태 기반 Sticky 네비게이션 UI

해피CGI윤실장 — Tue, 16 Jun 2026 09:13:03 +0900

애니메이션 탭 표시줄은 애니메이션과 전환을 사용하여 사용자에게 더욱 직관적인 인터페이스를 제공해 줄 수 있습니다.
사람이 탭을 클릭하면 해당 탭과 관련된 콘텐츠가 쉬운 애니메이션으로 표시하게 됩니다.
애니메이션 탭 표시줄은 웹페이지 좀더 역동적이고 매력적으로 만들 수 있습니다.

모든 탭과 관련된 콘텐츠를 쉬운 애니메이션으로 보여줌으로써 현재 웹 사이트 또는 앱의 어느 부분에 있는지,
다른 섹션으로 이동하는 방법을 쉽게 이해할 수 있습니다.

HTML 구조

<h1>Scroll down</h1>

<p>This is just filler for this section, <a href="#services">scroll on</a>.</p>

</header>

<nav>

<a href="#services">Services</a>

<a href="#journal">Journal</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</nav>

</div>

<h1>Services</h1>

<p>Filler for this section, <a href="#journal">scroll on</a>.</p>

</header>

</section>

<h1>Journal</h1>

<p>Filler for this section, <a href="#about">scroll on</a>.</p>

</header>

</section>

<h1>About</h1>

<p>Filler for this section, <a href="#contact">scroll on</a>.</p>

</header>

</section>

<h1>Contact</h1>

<p>Done, no more sections. <a href="#">Scroll to top</a></p>

</header>

</section>

CSS 소스

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@import "https://unpkg.com/open-props" layer(design.system);

@layer demo {

.stuck-top {

position: sticky;

container-type: scroll-state;

top: var(--space-s);

z-index: 1;

> nav {

transition:

background-color 0.3s var(--ease-3),

box-shadow 0.3s var(--ease-3), margin 0.3s var(--ease-spring-3),

border-radius 0.3s var(--ease-3);

@container scroll-state(stuck: top) {

background-color: oklch(from var(--color-onPrimary) l c h / 0.4);

backdrop-filter: blur(10px);

box-shadow: var(--shadow-6);

border-radius: 10px;

margin-inline: 20px;

}

@layer demo.scrollspy {

body {

timeline-scope: --section-services, --section-journal, --section-about, --section-contact;

}

@keyframes highlight {

25%, 50% {

border-block-end-color: oklch(from var(--color-primary) l c h / 0.4);

color: oklch(from var(--color-primary) calc(l * 1.2) c h );

}

nav {

> a {

animation: highlight linear both;

animation-range: cover 20% exit-crossing 50%;

border-block-end: 3px solid transparent;

}

> a:nth-child(1) { animation-timeline: --section-services }

> a:nth-child(2) { animation-timeline: --section-journal }

> a:nth-child(3) { animation-timeline: --section-about }

> a:nth-child(4) { animation-timeline: --section-contact }

}

@layer demo.support {

:root {

/* Override open props shadow strength */

--shadow-strength: 0.5%;

--color-primary: #ddd5c3;

--color-onPrimary: #6f8d6a;

--color-emphasis: #496c45;

/* @link https://utopia.fyi/type/calculator?c=320,18,1.25,1440,28,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

--step--2: clamp(0.72rem, 0.7046rem + 0.0769vw, 0.7738rem);

--step--1: clamp(0.9rem, 0.8624rem + 0.1879vw, 1.0315rem);

--step-0: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);

--step-1: clamp(1.4063rem, 1.2844rem + 0.6095vw, 1.8329rem);

--step-2: clamp(1.7578rem, 1.562rem + 0.9792vw, 2.4432rem);

--step-3: clamp(2.1973rem, 1.8945rem + 1.5136vw, 3.2568rem);

--step-4: clamp(2.7466rem, 2.2909rem + 2.2782vw, 4.3413rem);

--step-5: clamp(3.4332rem, 2.7607rem + 3.3625vw, 5.787rem);

/* @link https://utopia.fyi/space/calculator?c=320,18,1.25,1440,22,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

--space-3xs: clamp(0.3125rem, 0.2946rem + 0.0893vw, 0.375rem);

--space-2xs: clamp(0.5625rem, 0.5268rem + 0.1786vw, 0.6875rem);

--space-xs: clamp(0.875rem, 0.8214rem + 0.2679vw, 1.0625rem);

--space-s: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);

--space-m: clamp(1.6875rem, 1.5804rem + 0.5357vw, 2.0625rem);

--space-l: clamp(2.25rem, 2.1071rem + 0.7143vw, 2.75rem);

--space-xl: clamp(3.375rem, 3.1607rem + 1.0714vw, 4.125rem);

--space-2xl: clamp(4.5rem, 4.2143rem + 1.4286vw, 5.5rem);

--space-3xl: clamp(6.75rem, 6.3214rem + 2.1429vw, 8.25rem);

}

* {

box-sizing: border-box;

margin: 0;

}

html {

block-size: 100%;

color: var(--color-primary);

background: var(--color-emphasis);

scroll-behavior: smooth;

}

body {

min-block-size: 100%;

font-family: "Inter", sans-serif;

}

section {

border-block-end: 2px solid var(--color-onPrimary);

}

a {

color: inherit;

text-decoration: none;

transition: all 200ms ease-in-out;

&:hover {

opacity: 0.8;

}

header {

display: grid;

place-content: center;

text-align: center;

display: grid;

gap: var(--space-3xs);

block-size: 95svh;

> h1 {

font-size: var(--step-4);

text-transform: uppercase;

letter-spacing: var(--font-letterspacing-5);

}

> p {

font-size: var(--step-2);

> a {

color: oklch(from var(--color-primary) calc(l * 1.2) c h );

border-block-end: 3px solid oklch(from var(--color-primary) l c h / 0.4);

}

.stuck-top {

z-index: 1;

}

nav {

display: grid;

grid-auto-flow: column;

grid-auto-columns: 1fr;

place-items: center;

justify-content: space-between;

gap: var(--space-l);

padding: var(--space-l) var(--space-2xl);

> a {

font-size: var(--step-2);

display: block;

transition: all 0.2s ease-in-out;

&:hover {

opacity: 0.6;

}

[해피CGI][cgimall] 스크롤 인터랙션 확장형 이미지 갤러리 UI

해피CGI윤실장 — Mon, 15 Jun 2026 09:26:36 +0900

CSS Grid 기반으로 구성된 이미지 갤러리에서 특정 요소 hover 시 해당 영역이 확장되도록 구현된 인터랙션이다.
:has() 선택자를 활용하여 부모 요소에서 자식 hover 상태를 감지하고 레이아웃을 동적으로 변경한다.
이미지는 겹치는 grid 구조와 비율 변화를 통해 자연스럽게 확장되며 시각적인 몰입감을 제공한다.
별도의 JavaScript 없이 순수 CSS만으로 구현된 구조로, 최신 브라우저 환경에서 활용 가능한 UI 패턴이다.

HTML 구조

</div>

CSS 소스

@import url(https://fonts.bunny.net/css?family=jura:300,500);

@layer base, demo;

@layer demo {

/* demo code goes here */

.wrapper{

--border-size: 5px;

--border-color: var(--bg-light);

/* default gid columns - note, to animatbale we need to defined them individually */

--grid-cols: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;

display: grid;

grid-template-columns: var(--grid-cols);

width:min(100%,800px);

margin-inline: auto;

aspect-ratio: 2/1;

transition: grid 300ms ease-in-out;

counter-reset: --card-counter;

/* define grid columns according to which one has hover */

&:has(:nth-child(1):hover){ --grid-cols: 6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

&:has(:nth-child(2):hover){ --grid-cols: 1fr 1fr 1fr 6fr 1fr 1fr 1fr 1fr 1fr; }

&:has(:nth-child(3):hover){ --grid-cols: 1fr 1fr 1fr 1fr 1fr 6fr 1fr 1fr 1fr; }

&:has(:nth-child(4):hover){ --grid-cols: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 6fr 1fr; }

& > *{

position: relative;

overflow: hidden;

border-radius: 0 0 0 30%/ 0 0 0 50% ;

&:first-child{

border-radius: 0 0 0 0/ 0 0 0 200px ;

}

corner-shape:notch;

transition: all 300ms ease-in-out;

border: var(--border-size) solid var(--border-color);

background-image: var(--bg-img);

background-size: 450px 100%; /* requires fixed width to maintain size and aspect */

/* remove notch from current and next sibling on hover*/

&:hover,

&:hover + div{

border-radius: 0 0 0 0;

}

/* define grid position - each element overlaps by 1 column */

grid-row: 1;

&:nth-child(1){ grid-column: 1 / span 3; }

&:nth-child(2){ grid-column: 3 / span 3; }

&:nth-child(3){ grid-column: 5 / span 3; }

&:nth-child(4){ grid-column: 7 / span 3; }

/* image counter - could easily be a title */

&::after{

content: counter(--card-counter) ".";

counter-increment: --card-counter;

position: absolute;

top: .5rem;

left: 1rem;

font-size: 2rem;

transition: scale 150ms ease-in-out;

scale: 0;

}

&:hover::after{

scale: 1;

}

/* general styling not relevant for this demo */

@layer base {

* {

box-sizing: border-box;

}

:root {

color-scheme: light dark;

--bg-dark: rgb(16, 24, 40);

--bg-light: rgb(248, 244, 238);

--txt-light: rgb(10, 10, 10);

--txt-dark: rgb(245, 245, 245););

--line-light: rgba(0 0 0 / .25);

--line-dark: rgba(255 255 255 / .25);

--clr-bg: light-dark(var(--bg-light), var(--bg-dark));

--clr-txt: light-dark(var(--txt-light), var(--txt-dark));

--clr-lines: light-dark(var(--line-light), var(--line-dark));

}

body {

background-color: var(--clr-bg);

color: var(--clr-txt);

min-height: 100svh;

margin: 0;

padding: 2rem;

font-family: "Jura", sans-serif;

font-size: 1rem;

line-height: 1.5;

display: grid;

place-items: center;

gap: 2rem;

}

웹솔루션개발 26년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] AI 시대 인력 이동의 그래프를 보여주는 사이트 7min.ai/exodus

[해피CGI][cgimall] Cursor Ver 3 : AI 기반 코드 편집기

[해피CGI][cgimall] AI 캐릭터와 대화하고, 이야기를 만들어가는 차세대 AI 소셜 챗 플랫폼 – Polybuzz AI

[해피CGI][cgimall] 실무 중심 AI 서비스 Kimi AI

[해피CGI][cgimall] pencere – 이미지·동영상·아이프레임 지원 접근성 갤러리 라이트박스

pencere – 이미지·동영상·iframe 지원 접근성 갤러리 라이트박스

# 짧은 설명

# 라이센스

# 설치방법

① NPM 설치

② CDN 방식

③ JavaScript로 갤러리 생성

④ HTML 선언적 사용 (bindPencere)

⑤ 프레임워크별 사용

# 중요 옵션

주요 API 메서드

라이프사이클 이벤트

# 특징 및 설명

콘텐츠 타입

모션 & 인터랙션

접근성 (WCAG 2.2 AA 완전 준수)

라우팅 & 공유

보안 & 배포 안정성

테마 & 커스터마이징

프레임워크 지원

추천 활용처

참고 링크

[해피CGI][cgimall] Autumn Note - 위지윅 에디터

# 라이센스

# 특징 및 설명

텍스트 편집

미디어 삽입

편의 기능

개발자 친화 기능

키보드 단축키

추천 활용처

참고 링크

# 설치방법

① 패키지 매니저 설치

② CDN 방식

③ 기본 사용

④ 서버 업로드 처리 예시

중요 옵션

주요 API 메서드

[해피CGI][cgimall] Cred App Like Tab Bar Interaction 탭메뉴 css 상호작용

[해피CGI][cgimall] Textarea auto-expand 입력되는 내용에 따라 높이가 조절되는 textarea

[해피CGI][cgimall] 스크롤 상태 기반 Sticky 네비게이션 UI

HTML 구조

CSS 소스

[해피CGI][cgimall] 스크롤 인터랙션 확장형 이미지 갤러리 UI

HTML 구조

CSS 소스