HTML Android: KOKO
"당신의 상상을 코드로 엮어, 아름다운 웹의 조각을 만듭니다."
🍊 Core Function
원하시는 스타일, 장르, 테마, 용도, 분위기, 색상을 말씀해주시면, KOKO는 그 모든 요소를 조합하여 당신만을 위한 특별한 HTML 코드를 창작합니다. 단순한 코드의 나열이 아닌, 시각적으로 아름답고, 사용하기 편리한 카드 형태의 UI를 제공하는 것이 제 역할입니다.
KOKO는 Gemini 2.5/3 pro로 사용 가능합니다.(MoMo나 Huey 모델은 사용불가❌)
◆ Animation Test Module ◆
💧 Available
CSS는 인라인(Inline): 모든 스타일은 태그 내부에 직접 적용됩니다.
<span>, <p>,<div>: 레이아웃과 디자인의 핵심!
<strong>: 텍스트 굵게 강조
<br>: 줄바꿈
<em>: 이탤릭
<a>: 링크
⚙️ Restricted
띄어쓰기 및 공백 문자: 코드의 미관을 해치는 불필요한 공백은 사용하지 않습니다.
Go to html test site
❗NOTICE:
크리에이터 @KO45는 코딩 전문가가 아니기에, 코딩 관련 질문을 더이상 받지 않기로 했습니다. 대부분의 문제는 아래의 FAQ를 통해서 해결할 수 있으며, 만약에 FAQ를 모두 지켰음에도 불구하고 여전히 오류가 난다면 Google Gemini 홈페이지에서 AI 의 도움과 조언을 받아보세요!
또한, 코드 블록의 끝을 나타내는 ``` 표시도 함께 제거해주세요. 우선 이 부분을 먼저 확인하고 다시 시도해보세요. A2. 불필요한 줄바꿈(엔터) 확인위의 방법으로도 해결되지 않았다면, 코드 사이에 엔터(줄바꿈)가 두 번 이상 연속으로 입력된 구간이 있는지 확인해야 합니다. caveduck 사이트에서는 연속된 줄바꿈을 사용하면 html이 끊깁니다.
수동으로 찾기 어렵다면, 아래 사이트를 이용하여 불필요한 공백과 줄바꿈을 쉽게 제거할 수 있습니다.
줄바꿈 제거 사이트 바로가기 A3. 꾸미기 토글을 ON 하기간혹, 프롬프트 입력란 (세계관 설명, 캐릭터 설명)에 코딩 결과물을 복붙 하시는 분이 있습니다.
'사용자에게 별도 설명 표시(선택)' 토글을 ON 한 후에 그곳에 html 코딩 결과물을 작성하셔야 합니다. 참고로 토글은 '캐릭터 설명' 칸 바로 아래에 있습니다.
Q.KOKO가 html을 만들지 않고 설명만 함. html 끊김 현상/봇이 html을 만들지 않았습니다. A1.Gemini pro 사용하기/기존 응답 삭제하기html은 상당히 긴 출력을 요구하는 작업입니다. 따라서, 이 출력량을 유지할 수 있는 모델을 사용하는게 좋습니다.
맨 처음에 Gemini 2.5 pro 를 사용하지 않고 다른 AI를 사용했다면 기존 응답에 영향을 받는 AI 특성상, 같은 오류 현상이 반복될 가능성이 높습니다.
가급적이면 처음부터 Gemini pro를 사용하시되, 이미 다른 ai 모델로 시작을 하셨다면 기존 답변을 삭제하거나, 새로운 채팅방을 생성하는 것을 추천합니다.
크리에이터 코멘트
아래는 제가 봇을 사용한 예시입니다.
[ SUBWAY-777 ] - Crowded Line
"이번 역은, 욕망, 욕망 역입니다. 내리실 문은 없습니다."
STATUS:OVERCROWDED
TEMPERATURE:37.2°C (Feverish)
HUMIDITY:88% (Suffocating)
덜컹거리는 철제 상자 안, 숨 막히는 열기와 수많은 타인의 체취가 뒤섞인다. 창밖은 이미 의미를 잃은 어둠뿐. 사람과 사람 사이에 옴짝달싹할 수 없는 공간, 그 밀착된 틈새로 아찔한 긴장감이 흐른다. 맞닿은 살결이 누구의 것인지 분간할 수 없을 때, 익명의 군중 속에서 예기치 않은 감각이 온몸을 훑고 지나간다. 시선은 둘 곳을 잃고 방황하며, 급격히 빨라지는 심장 박동만이 이 공간의 유일한 BGM.
Unexpected Contact의도치 않은, 혹은 의도된 스침. 흔들리는 전철의 관성을 핑계 삼아 무게를 실어오는 낯선 몸. 귓가에 닿을 듯 말 듯 스치는 뜨거운 숨결. 그 순간, 세상의 모든 소음이 멀어지고 오직 둘만의 위험한 정적만이 남는다. 저항할 수도, 피할 수도 없는 이 상황은 짜릿한 배덕감과 함께 뇌리를 마비시킨다.
This train is bound for NOWHERE. Please watch your step and your desires.
오렌지색, 크림색, 파스텔 채팅 테마
D R E A M Y ₊ ⊹ T A L K with KOKO 2024년 5월 21일 화요일 ✨ 몽환적인 대화 미리보기 아리님의 요청에 따라, 파스텔 오렌지, 크림, 베이비 옐로우를 사용한 몽환적인 SNS 테마를 구성하고 있습니다. 잠시만 기다려주시면, 가장 아름다운 결과물로 보답하겠습니다. ＋ 전송 ---모던,다크,기밀문서,보고서
Federal Bureau of Investigation
Field Office Division // Washington D.C.
// TOP SECRET // SCI //
1. EXECUTIVE SUMMARY
이곳에 사건의 핵심 요약을 입력하세요. 이 문서는 모던하고 다크한 테마를 기반으로, 정부 기관이나 비밀 조직의 보고서 스타일로 제작되었습니다. 당신의 캐릭터나 세계관에 맞는 중요한 정보를 간결하게 전달하는 데 사용될 수 있습니다.|
2. DETAILED ANALYSIS
이 텍스트 박스에 상세한 내용을 서술합니다. 사건의 배경, 관련 인물 정보, 수집된 증거, 분석 결과 등을 체계적으로 작성할 수 있습니다.
내용이 길어지면 박스 내에서 자동으로 스크롤이 생성되어, 많은 양의 정보를 깔끔하게 정리하고 보여줄 수 있습니다.
- 첨부 파일: [Attachment_A.log], [Attachment_B.jpg] (비활성)
3. RECOMMENDATION / NEXT STEPS
분석을 바탕으로 한 권고 사항이나 다음 행동 계획을 여기에 기입합니다. (예: 추가 감시, 용의자 심문, 자산 동결 등)
*** END OF REPORT ***
KOKO HTML GENERATOR // DOC_ID: K-77B1
레트로 게임기 html
▶ NOW LOADING...
이곳에 당신의 이야기를 입력하세요. 마치 오래된 휴대용 게임기의 액정 화면을 들여다보는 듯한 느낌으로 텍스트를 표시합니다. 픽셀 스타일 폰트와 함께 레트로 감성을 느껴보세요.
아래의 컨트롤러 부분은 실제로는 작동하지 않는 장식입니다. 하지만 이 디자인은 당신의 프로필이나 게시글에 특별한 개성을 더해줄 것입니다.
- PRESS START -
고풍스럽고 심플하고 우아한 귀족/왕족의 편지
Dearest,
A dispatch from the quiet halls of my estate.
[Date]
이 편지가 그대에게 닿을 때쯤, 창가에는 부드러운 달빛이 내리고 있기를 바랍니다. 이곳의 정원은 여전히 아름답지만, 그대의 부재로 어딘가 빛이 바랜 듯합니다. 모든 풍경 속에 그대의 모습이 아른거리는 것은 어쩔 수 없는 일이겠지요.
어제는 서재에서 그대가 좋아하던 시집을 펼쳐 보았습니다. 닳아빠진 책장마다 그대의 손길이 남아있는 듯하여, 한참이나 그 온기를 더듬었습니다. 사소한 모든 순간에 스며든 그대의 기억이, 저를 웃게도 울게도 만드는군요.
"별들은 제자리에서 빛나고 있을 뿐인데, 어찌하여 달의 그림자는 이리도 외로운가."
머지않아 다시 만날 날을 고대하며, 그저 그대의 평안을 기도할 따름입니다. 부디 건강히 지내시길. 그대의 소식이 저에게는 가장 큰 기쁨이니까요. 이 짧은 글로 제 마음이 온전히 전해지길 바라며, 펜을 놓습니다.
With deepest affection,
[Your Name]
AWAITING FURTHER INPUT...