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

박물관, 미술관, 공연, 문화재 관련해서 방대하고 다양한 데이터를 제공 중입니다.대표적으로 박스 오피스 정보 부터도서관에 책 데이터 부터박물관 소장품 까지 다양한 공공 데이터를 제공하고 있습니다.문화 관련하여 공공데이터가 필요하시면 방문해 보시기 바랍니다.

일전에 해당 API 를 소개드린 적이 있습니다만,그때 당시 보다 더 다양한 API 를 이제 지원 합니다.https://www.data.go.kr/data/15101972/openapi.do대표적으로 통신사 데이터를 기반으로 각 지역별 방문자 수를 가져올 수 있습니다.https://www.data.go.kr/data/15128559/openapi.do티맵 데이터 기반으로 방문 빈도가 높은 관광지 데이터를 가져올 수 있습니다. 이외에도 다양한 데이터가 제공됩니다. 관광 관련으로 사이트를 개발하고 있다면,방문하셔서 여러 API 를 확인해 보시면 도움이 되실 겁니다.

사용자가 직접 AI 캐릭터를 만들고 다른 유저가 만든 수많은 캐릭터와 실시간 소통하는 롤플레잉 AI 플랫폼 Janitor AI 입니다. - 무제한 캐릭터 생성: 성격, 외모, 배경 스토리, 대화 스타일 등을 세밀하게 설정하여 나만의 '인생 캐릭터'를 만들 수 있습니다.- JanitorLLM (자체 모델): 별도의 유료 API 연결 없이도 사이트 내에서 자체적으로 제공하는 AI 모델을 통해 무료로 대화가 가능합니다.- 유연한 API 연동 (BYOM): OpenAI(GPT-4), Claude, DeepSeek 등 외부 고성능 AI 모델을 연결하여 더 똑똑하고 몰입감 넘치는 대화를 즐길 수 있습니다.- 고급 메모리 시스템: 대화가 길어져도 캐릭터가 설정과 과거 맥락을 잊지 않도록 돕는 메모리 보존 기능을 지..

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..