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

AI Novelist 사용자가 예제 프롬프트나 자신의 텍스트에서 시작하여 AI를 사용하여 이야기를 쓸 수 있습니다. 참고로 일본어 작성됩니다.- AI 기반 이야기 작성- 대형 일본어 모델- 영감을 위한 다양한 예제 프롬프트 제공회원가입 없이도 프롬프트로 기본 스토리 라인을 적으면 이야기를 생성해줍니다.가격정책- 프리 체험플랜 : 0원 월 5,000자 생성- 스탠다드 입문작가용: 월 10달러 ~ 15달러 : 월 10만 자 생성- 프로 전업 작가용 : 월 25달러 ~ 30달러 : 무제한 생서, 최신형 AI 모델 사용, 무제한 세계관 관리전문이든 재미든 인공지원과 함께 일본어로 된 소설을 쓰고 싶으면 AI가 보조 혹은 주체가 되어 잘 쓸 수 있도록 도와주는 도구입니다.

■ 라이센스MIT 라이센스 ■ 상세 설명 Day/Nite는 웹사이트에서 라이트 모드와 다크 모드를 손쉽게 전환할 수 있도록 구현된 UI 컴포넌트이다.사용자의 환경 설정이나 직접 선택에 따라 테마를 변경할 수 있으며, CSS와 JavaScript를 조합하여 비교적 간단하게 적용할 수 있다.일반적으로 다크모드는 어두운 배경과 밝은 텍스트를 사용하여 눈의 피로를 줄이고 가독성을 높이기 위한 UI 방식이다. 이 예제는 다음과 같은 방식으로 동작한다. - 토글 버튼 클릭 시 라이트 / 다크 모드 전환 - CSS 클래스 또는 데이터 속성 변경을 통해 테마 적용 - 필요 시 localStorage를 활용하여 사용자 선택 상태 유지 또한 CSS의 prefers-color-scheme 미디어 쿼리를 활용하면사용자의 운영..

■ 라이센스MIT 라이센스■ 상세 설명theSVG는 GitHub, Figma, Google 등 다양한 브랜드 아이콘을 SVG 형태로 제공하는 아이콘 라이브러리이다.해당 라이브러리는 npm 패키지 형태로도 제공되지만, 일반 웹사이트에서는 별도의 설치 없이도 쉽게 사용할 수 있다는 것이 가장 큰 장점이다. 기본적으로 다음과 같은 방식으로 활용할 수 있다. CDN 방식이미지 URL을 통해 아이콘을 바로 불러와 사용할 수 있다.HTML에 태그만으로 적용 가능하여 가장 간편하다. SVG 직접 삽입사이트에서 SVG 코드를 복사하여 HTML에 직접 삽입하는 방식이다.외부 의존성이 없어 안정적이며 디자인 커스터마이징에 유리하다. npm 패키지 방식React, Vue 등 프론트엔드 프로젝트에서 import 형태로 사용..

마우스 호버를 하면 탄력적이게 휘어집니다.마우스 아웃하면 탄력적으로 원래 모양으로 돌아갑니다.이 소스는 메뉴 텍스트 각 글자가 hover 시 탄성 있게 위로 휘어지는 효과를 만든 CSS입니다.핵심은 일반적인 transform 애니메이션이 아니라 아래 내용을 확인하세요. @property 로 커스텀 속성 애니메이션 가능하게 만듬offset + shape() 로 글자마다 곡선 경로 위에 배치sibling-index(), sibling-count() 로 글자 위치별로 다르게 계산hover 시 --_s 값을 0 → 1로 바꿔서 곡률을 키움전체 소스는 해당 사이트 또는 첨부 파일을 다운로드 받아서 확인이 가능합니다.

클릭시 애니메이션 효과가 있습니다.핵심내용은 아래와 같습니다..option 컴포넌트 전체 스타일내부에 fieldset, legend, 라디오 영역을 배치:before 가짜 요소를 이용해서 선택된 버튼 뒤에 움직이는 배경판을 만듬:has([value="no"]:checked) 조건으로 "no"가 체크되면 배경판이 오른쪽으로 이동라디오 input은 실제로는 투명하게 덮어두고, 보이는 건 레이블/박스 스타일

여러 개의 이미지를 3D 큐브 형태로 배치하여 마우스 움직임에 따라 입체적으로 반응하는이미지 갤러리 효과를 구현한 예제입니다. 사용자가 마우스를 움직이면 이미지가 자연스럽게 이동하거나 강조되어 보여지며, 일반적인 이미지 목록보다 더 생동감 있는 화면 구성을 만들 수 있습니다.포트폴리오 페이지, 작품 갤러리, 상품 소개 페이지 등에서시각적으로 흥미로운 콘텐츠 표현을 위해 활용할 수 있는 인터랙션 효과입니다.HTML 구조 × CSS 소스 body { margin: 0; overflow: hidden; background-color: #000; } canvas { display: block; } /* Lightbox styles */ #ligh..

마우스 움직임에 따라 카드가 자연스럽게 기울어지며입체적으로 반응하는 3D 인터랙션 효과를 CSS로 구현한 예제입니다.transform, perspective, hover 속성을 활용하여별도의 JavaScript 없이도 카드가 실제로 움직이는 듯한 동적인 UI 효과를 표현할 수 있습니다.카드형 레이아웃, 서비스 소개 영역, 상품 리스트 등 다양한 UI 디자인에 적용하기 좋으며, 간단한 코드만으로도 세련된 인터랙션을 구현할 수 있는 효과적인 예제입니다.HTML 구조- const DATA = [- '1540968221243-29f5d70540bf', - '1596135187959-562c650d98bc', - '1628944682084-831f35256163', - '1590013330451-3946e..

FilePond는 웹 애플리케이션에서 파일 업로드 기능을 쉽고 세련되게 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다. 기본 HTML 파일 입력 요소를 확장하여 드래그앤드롭 업로드, 이미지 미리보기, 업로드 진행 상태 표시 등 다양한 사용자 친화적인 기능을 제공합니다. https://pqina.nl/filepond/ 최신버전의 소스는 https://github.com/pqina/filepond/tree/v5 에서 다운로드 가능 합니다. 사용자는 파일을 업로드 영역에 드래그하여 추가하거나, 파일 선택 창을 통해 업로드할 수 있으며, 업로드되는 파일의 상태를 실시간으로 확인할 수 있습니다. 또한 이미지 업로드 시 썸네일 미리보기를 제공하여 사용자 경험을 크게 향상시킵니다. FilePond은 ..

Flatpickr은 웹사이트에서 날짜와 시간을 선택할 수 있도록 도와주는 JavaScript 기반의 DateTime Picker 라이브러리입니다. 별도의 프레임워크나 라이브러리에 의존하지 않는 구조로 제작되어 가볍고 빠르게 동작하며, 다양한 옵션과 테마를 제공하여 다양한 웹 환경에서 유연하게 사용할 수 있습니다.https://flatpickr.js.org/ 사이트에서 최신버전의 소스 다운로드 및 데모페이지와 사용방법을 확인 가능 합니다. 입력 필드에 간단한 설정만 적용하면 캘린더 UI가 자동으로 생성되며, 사용자는 클릭만으로 날짜와 시간을 편리하게 선택할 수 있습니다. 날짜 선택뿐 아니라 시간 선택, 날짜 범위 선택, 여러 날짜 선택 등의 다양한 기능을 지원합니다. 또한 최소 날짜, 최대 날짜 설정, 특..

가로로 스크롤 해서 볼 수 있는 갤러리 입니다. 미술관 디자인으로 다양한 작품을 볼 수 있습니다.자세한 내용은 데모를 참고해주시기 바랍니다.HTML GALLERIE D'ART 01 / Collection Ethereal Form Captured in the gentle light of early morning, this piece explores the boundaries between reality and abstraction. The soft textures invite the viewer to look closer, revealing layers of complexi..