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

[해피CGI][cgimall] Tiptap - Notion 스타일 에디터 제작이 가능한 최신 JavaScript 에디터 라이브러리

해피CGI윤실장 — Thu, 16 Jul 2026 09:46:23 +0900

Tiptap은 웹사이트나 관리자 페이지에 글쓰기 에디터를 구현할 때 사용할 수 있는 최신 JavaScript 에디터 라이브러리입니다. 기존 CKEditor나 TinyMCE처럼 정해진 디자인의 에디터를 그대로 붙이는 방식이 아니라, 원하는 UI와 기능을 자유롭게 구성할 수 있는 Headless Editor 방식입니다.

Tiptap은 ProseMirror 기반으로 만들어졌으며, 게시판 글쓰기, 블로그 에디터, CMS 관리자 에디터, 쇼핑몰 상품설명 에디터, Notion 스타일 블록 에디터, AI 글쓰기 도우미 같은 기능을 구현할 때 활용할 수 있습니다.

React, Vue, Next.js, Nuxt, Svelte, Alpine.js, Vanilla JavaScript 환경을 지원하며, 일반 JavaScript 환경에서도 사용할 수 있습니다. 다만 실무에서는 React나 Vue 기반 프로젝트에서 사용하는 경우가 많습니다.

기본 에디터 코어와 StarterKit, Heading, Bold, Italic, List, Link, Image, Table, Placeholder, Character Count 같은 주요 확장 기능은 무료로 사용할 수 있습니다. 단, 실시간 협업, 댓글, 버전관리, AI 기능, 문서 변환 같은 일부 고급 기능은 유료 기능으로 제공됩니다.

Tiptap은 MIT License 기반의 오픈소스 에디터로, 기본 기능은 상업용 홈페이지나 솔루션에도 무료로 적용할 수 있습니다. 에디터 디자인을 직접 구성할 수 있기 때문에 기존 사이트 디자인에 맞춘 커스텀 에디터 제작에 적합합니다.

주요 기능

- Rich Text Editor 제작

- Notion 스타일 블록 에디터 구현

- 게시판 / 블로그 / CMS 에디터 적용

- React / Vue / Next.js / Vanilla JS 지원

- Bold / Italic / Heading / List / Link 지원

- Image / Table / Placeholder 확장 가능

- Markdown 연동 가능

- Slash Command 구현 가능

- AI 글쓰기 기능 연동 가능

- Headless 방식으로 자유로운 디자인 가능

- MIT License 기반 무료 사용 가능

공식 홈페이지

https://tiptap.dev/

공식 문서

https://tiptap.dev/docs

설치 가이드

https://tiptap.dev/docs/editor/getting-started/install

Vanilla JavaScript 사용방법

https://tiptap.dev/docs/editor/getting-started/install/vanilla-javascript

React 사용방법

https://tiptap.dev/docs/editor/getting-started/install/react

Vue 사용방법

https://tiptap.dev/docs/editor/getting-started/install/vue3

Extensions 문서

https://tiptap.dev/docs/editor/extensions

GitHub

https://github.com/ueberdosis/tiptap

[출시] 임대형 해피 도우미구인구직 웹솔루션 Ver6.4이 새롭게 출시되었습니다

해피CGI윤실장 — Wed, 15 Jul 2026 09:13:33 +0900

안녕하세요 해피CGI 입니다.
임대형 해피 도우미구인구직 웹솔루션 Ver6.4이 출시 되었습니다.
자세한 사항은 아래의 내용을 참고하시기 바랍니다.

[출시] 임대형 해피 유흥구인구직 웹솔루션 Ver3.1이 새롭게 출시되었습니다

해피CGI윤실장 — Wed, 15 Jul 2026 09:05:49 +0900

안녕하세요 해피CGI 입니다.
임대형 해피 유흥구인구직 웹솔루션 Ver3.1이 출시 되었습니다.
자세한 사항은 아래의 내용을 참고하시기 바랍니다.

[출시] 해피 인터넷뉴스 웹솔루션 Ver4.1 스킨J 새롭게 출시되었습니다

해피CGI윤실장 — Tue, 14 Jul 2026 09:05:22 +0900

안녕하세요 해피CGI 입니다.
해피 인터넷뉴스 웹솔루션 Ver4.1 스킨J가 출시 되었습니다.
자세한 사항은 아래의 내용을 참고하시기 바랍니다.

[업그레이드] 해피 종합구인구직 웹솔루션 Ver7.3로 업그레이드 되었습니다

해피CGI윤실장 — Mon, 13 Jul 2026 09:10:15 +0900

안녕하세요 해피CGI 입니다.
해피 종합구인구직 웹솔루션 Ver7.3로 업그레이드 되었습니다.
자세한 사항은 아래의 내용을 참고하시기 바랍니다.

더욱 강력한 기능으로 보답하겠습니다.
감사합니다

[업그레이드] 해피 체험단모집 웹솔루션 Ver4.6 [입점형]으로 업그레이드 되었습니다

해피CGI윤실장 — Thu, 9 Jul 2026 09:18:39 +0900

안녕하세요 해피CGI 입니다.
해피 체험단모집 웹솔루션 Ver4.6 [입점형]으로 업그레이드 되었습니다.
자세한 사항은 아래의 내용을 참고하시기 바랍니다.

해피 체험단모집 웹솔루션 스킨A
해피 체험단모집 웹솔루션 스킨B

[해피CGI][cgimall] Floating UI - 최신 Tooltip / Popover 위치 제어 JavaScript 라이브러리

해피CGI윤실장 — Wed, 8 Jul 2026 09:06:01 +0900

Floating UI는 Tooltip, Popover, Dropdown Menu, Context Menu, Select Box 등 화면 위에 떠 있는 다양한 UI 요소의 위치를
자동으로 계산하고 배치해주는 최신 JavaScript 라이브러리입니다.
기존 Popper.js의 후속 개념으로 개발되었으며 최근 React, Vue, Vanilla JavaScript 환경에서 많이 사용되고 있습니다.

스크롤 영역 안쪽이나 모바일 화면, 브라우저 가장자리 등 복잡한 환경에서도요소가 화면 밖으로 잘리지 않도록
자동으로 위치를 보정해주며 Tooltip, Dropdown, Popover 같은 인터페이스를 매우 안정적으로 구현할 수 있습니다.

특히 화면 충돌 감지(Collision Detection), 자동 방향 변경(Flip), 위치 이동(Shift), 화살표(Arrow) 위치 계산, 스크롤 대응 등의 기능을
기본 제공하여 직접 복잡한 좌표 계산을 구현할 필요가 없습니다.

React, Vue, Vanilla JS 환경을 모두 지원하며 필요한 기능만 선택적으로 사용할 수 있는 모듈 구조(Tree-shaking)를 제공해 가볍고 빠르게 사용할 수 있습니다. MIT License 기반으로 상업적 프로젝트에서도 무료로 사용할 수 있습니다.

주요 기능

- Tooltip / Popover / Dropdown 위치 자동 계산

- 브라우저 가장자리 충돌 자동 회피

- 스크롤 영역 자동 대응

- 자동 방향 변경 기능 제공

- Arrow 위치 자동 계산

- Mouse Cursor 기준 위치 지정 지원

- React / Vue / Vanilla JS 지원

- 가볍고 빠른 모듈 구조 제공

- MIT License 무료 사용 가능

공식 홈페이지

https://floating-ui.com/

Getting Started 문서

https://floating-ui.com/docs/getting-started

Tutorial 문서

https://floating-ui.com/docs/tutorial

GitHub

https://github.com/floating-ui/floating-ui

[해피CGI][cgimall] 마우스를 따라 다니는 글씨들 Letters mouse follow

해피CGI윤실장 — Tue, 7 Jul 2026 09:07:11 +0900

글씨가 마우스를 따라다니는 효과입니다.

HTML 구조

CSS 소스

body {

margin: 0;

overflow: hidden;

height: 100vh;

}

JS 소스

.
.
.
첨부 파일을 다운로드하거나 해당 사이트로 이동해서 확인해 주세요.

첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.

[출시] 해피 인터넷뉴스 웹솔루션 Ver4.1 스킨I 새롭게 출시되었습니다

해피CGI윤실장 — Mon, 6 Jul 2026 09:11:53 +0900

안녕하세요 해피CGI 입니다.
해피 인터넷뉴스 웹솔루션 Ver4.1 스킨I가 출시 되었습니다.
자세한 사항은 아래의 내용을 참고하시기 바랍니다.

[해피CGI][cgimall] 비디오 버튼 Video button animation - Only CSS

해피CGI윤실장 — Fri, 3 Jul 2026 09:20:44 +0900

버튼에 마우스를 올리면 영상 영역이 보이고 클릭하면 비디오가 재생되는 버튼입니다.

응용하여 활용 가능합니다.

HTML 구조

</div>

</div>

</div>

CSS(SCSS) 소스

.wrapper {

--color: #1F242D;

--color-invert: #ffffff;

--clip-path: circle(15px at left);

--clip-path-hover: circle(70px at left);

--clip-path-clicked: circle(100vw at left);

--duration: .4s;

--timing-function: ease;

position: relative;

display: flex;

justify-content: center;

align-items: center;

width: 100%;

.video {

height: 100vh;

overflow: hidden;

display: flex;

justify-content: center;

align-items: center;

margin-left: 15px;

clip-path: var(--clip-path);

transition: clip-path var(--duration) var(--timing-function);

video {

position: fixed;

background: #c4cbde;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

transform: translate(-50%, -50%);

}

.text {

position: relative;

text-transform: uppercase;

font-weight: 600;

letter-spacing: .2px;

opacity: var(--opacity, 1);

transition: opacity .3s var(--timing-function) .2s;

&::before,

&::after {

content:"";

position: absolute;

bottom: 0;

left: -1px;

right: 25px;

height: 0;

}

&::before {

box-shadow: 26px 0 0 1px var(--color);

right: var(--r, 100%);

opacity: var(--opacity, 0);

transition: right .5s ease-in, opacity .1s linear;

}

&::after {

box-shadow: 26px 0 0 1px var(--color-invert);

clip-path: var(--clip-path);

transition: clip-path var(--duration) var(--timing-function);

}

> span {

&::before,

&::after {

content: attr(data-text);

padding-left: 26px;

}

&::before {

color: var(--color);

}

&::after {

color: var(--color-invert);

clip-path: var(--clip-path);

transition: clip-path var(--duration) var(--timing-function);

position: absolute;

left: 0;

}

input {

width: 220px;

height: 40px;

margin: auto;

position: absolute;

left: 0;

right: 0;

border-radius: 40px;

outline: none;

z-index: 2;

appearance: none;

cursor: pointer;

&:focus {

outline: 0;

}

&:hover {

~ .video {

clip-path: var(--clip-path-hover);

}

~ .text {

&::before {

--r: 25px;

--opacity: 1;

}

&::after {

clip-path: var(--clip-path-hover);

}

> span {

&::after {

clip-path: var(--clip-path-hover);

}

&:checked {

width: 100%;

height: 100%;

border-radius: 0;

~ .video {

clip-path: var(--clip-path-clicked);

}

~ .text {

--opacity: 0;

transition: opacity .3s var(--timing-function);

&::after {

clip-path: var(--clip-path-clicked);

}

> span {

&::after {

clip-path: var(--clip-path-clicked);

}

//--- ## BASIC #############

body {

background: #E8EBF3;

height: 100vh;

font: 400 16px 'Poppins', sans-serif;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

.socials {

position: fixed;

display: block;

left: 20px;

bottom: 20px;

z-index: 9999;

> a {

display: block;

width: 30px;

opacity: .2;

transform: scale(var(--scale, .8));

transition: transform .3s cubic-bezier(0.38,-0.12, 0.24, 1.91);

&:hover {

--scale: 1;

}