<!doctype html><html lang="ko"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – 2000년대 Caramail 채팅, PHP로 다시 만들다 (무료, 온라인)</title> <meta name="description" content="CaraChat은 2002년 Caramail 채팅 클라이언트를 PHP로 다시 만들었습니다. 대화방, 1:1 대화, 색깔 닉네임, 무지개와 물결 글자, 그리고 원래대로 그려진 스마일리까지. 무료, 브라우저에서 바로."> <link rel="canonical" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/en/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="CaraChat – 2000년대 Caramail 채팅"> <meta property="og:description" content="대화방, 1:1 대화, 색깔, 무지개, 그리고 원조 스마일리: PHP로 되살린 2002년의 채팅."> <meta property="og:url" content="https://{{DOMAIN}}/ko/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="ko_KR"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – 2000년대 Caramail 채팅"> <meta name="twitter:description" content="대화방, 1:1 대화, 색깔, 무지개, 그리고 원조 스마일리: PHP로 되살린 2002년의 채팅."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebApplication", "name": "CaraChat", "description": "JumPHP로 PHP에 다시 만든 2002년 Caramail 채팅 클라이언트: 대화방, 1:1 대화, 색깔, 무지개와 물결 글자, 원래대로 그려진 스마일리.", "url": "https://{{DOMAIN}}/ko/", "applicationCategory": "CommunicationApplication", "operatingSystem": "Web browser, Linux, Windows, macOS", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": ["https://{{DOMAIN}}/images/chat.png", "https://{{DOMAIN}}/images/rooms.png", "https://{{DOMAIN}}/images/search.png", "https://{{DOMAIN}}/images/private.png", "https://{{DOMAIN}}/images/phone.png", "https://{{DOMAIN}}/images/login.png"], "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"}, "potentialAction": {"@type": "UseAction", "target": "https://{{DOMAIN}}/play/"}} </script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ {"@type": "Question", "name": "스마일리는 어떻게 만드나요?", "acceptedAnswer": {"@type": "Answer", "text": "2002년 그대로입니다. 눈, 코, 입을 이어 쓰면 됩니다. 예: :-) ;-) 8-) :o) , 산타클로스는 :#) . 코는 필수입니다. 스마일리 뒤에 숫자를 붙이면 색이 바뀝니다(:-)2). #c 나 #d 는 손을 더해 줍니다. #00 부터 #14 까지는 그림이고, #13 은 하트입니다."}}, {"@type": "Question", "name": "서버가 필요한가요?", "acceptedAnswer": {"@type": "Answer", "text": "네. 채팅 서버 CaraChat Serveur(PHP, 데이터베이스 없음)를 아무 컴퓨터에서나 Docker로 실행한 다음, 접속 창에 서버 주소와 포트(4500)를 입력합니다."}} ]} </script> <style> :root { --gris: #c0c0c0; --bleu: #0000ff; --nuit: #1a1a8c; --rose: #ff00c8; } * { box-sizing: border-box; } body { margin: 0; font-family: Helvetica, Arial, sans-serif; background: var(--gris); color: #000; line-height: 1.5; } header { background: #404040; color: #fff; padding: 12px 16px; } header .wrap { display: flex; align-items: center; gap: 12px; } header img { width: 40px; height: 40px; image-rendering: pixelated; } header strong { font-size: 1.4rem; color: #fff; } .wrap { max-width: 1040px; margin: 0 auto; } main { padding: 0 16px 40px; } .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin: 10px 0 0; padding: 0; } .langs a { color: var(--nuit); } h1 { color: var(--bleu); font-size: 2.2rem; margin: 28px 0 8px; } h2 { color: var(--nuit); border-bottom: 2px solid #808080; padding-bottom: 4px; margin-top: 40px; } .lead { font-size: 1.15rem; max-width: 760px; } .play { display: inline-block; background: var(--bleu); color: #fff; font-weight: bold; font-size: 1.25rem; padding: 14px 28px; border-radius: 6px; text-decoration: none; margin: 12px 0 24px; } .play:hover { background: var(--nuit); } figure { margin: 0; background: #fff; border: 1px solid #808080; padding: 6px; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: .9rem; color: #646464; padding: 6px 2px 0; } .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .card { background: #fff; border: 1px solid #808080; padding: 12px 16px; } code { background: #eeeeff; padding: 1px 4px; border-radius: 3px; } .help h3 { color: #990000; font-size: 1.05rem; margin: 18px 0 6px; } .help .note { color: #646464; font-size: .9rem; } .rainbow span:nth-child(9n+1) { color: #ff00c8 } .rainbow span:nth-child(9n+2) { color: #6e265f } .rainbow span:nth-child(9n+3) { color: #7d0000 } .rainbow span:nth-child(9n+4) { color: #1a1a8c } .rainbow span:nth-child(9n+5) { color: #0000ff } .rainbow span:nth-child(9n+6) { color: #147300 } .rainbow span:nth-child(9n+7) { color: #9b9b14 } .rainbow span:nth-child(9n+8) { color: #ff9d00 } .rainbow span:nth-child(9n) { color: #ff0000 } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .shots .phone img { max-width: 260px; margin: 0 auto; } @media (max-width: 720px) { .shots { grid-template-columns: 1fr; } } footer { font-size: .85rem; color: #404040; padding: 24px 16px; border-top: 1px solid #808080; } @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } } </style></head><body><header><div class="wrap"><img src="../images/favicon.png" alt="애플릿의 윙크하는 스마일리" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="언어"> <a href="../" lang="fr" hreflang="fr">Français</a> <a href="../en/" lang="en" hreflang="en">English</a> <a href="../es/" lang="es" hreflang="es">Español</a> <a href="../de/" lang="de" hreflang="de">Deutsch</a> <a href="../it/" lang="it" hreflang="it">Italiano</a> <a href="../pt/" lang="pt" hreflang="pt">Português</a> <a href="../nl/" lang="nl" hreflang="nl">Nederlands</a> <a href="../pl/" lang="pl" hreflang="pl">Polski</a> <a href="../ru/" lang="ru" hreflang="ru">Русский</a> <a href="../uk/" lang="uk" hreflang="uk">Українська</a> <a href="../tr/" lang="tr" hreflang="tr">Türkçe</a> <a href="../ja/" lang="ja" hreflang="ja">日本語</a> <a href="../zh/" lang="zh" hreflang="zh">中文</a> <strong lang="ko" aria-current="page">한국어</strong> </nav> <h1>2000년대 채팅이 돌아왔다</h1> <p class="lead">CaraChat은 2002년 Caramail 채팅 애플릿을 PHP로 다시 만들었습니다. 대화방, 1:1 대화, 분홍색과 파란색 닉네임, <span class="rainbow"><span>무</span><span>지</span><span>개</span></span>와 물결 글자, 그리고 그때와 똑같이 그려진 스마일리까지.</p> <a class="play" href="../play/?lang=ko">채팅 입장</a> <figure> <img src="../images/chat.png" alt="CaraChat의 Accueil(홈) 대화방: 색깔 문장, 스마일리, 접속자 목록, 탭" width="1024" height="700"> <figcaption>대화방 하나: 색깔 문장, 무지개, 스마일리, 오른쪽의 접속자, 주황색으로 깜박이는 1:1 대화.</figcaption> </figure> <h2>애플릿의 탭</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="Salons 탭: 상설 대화방, 공개 또는 비공개 대화방 만들기" width="1024" height="700" loading="lazy"><figcaption>Salons(대화방): 상설 대화방과 회원이 만든 대화방, 대화방 만들기.</figcaption></figure> <figure><img src="../images/search.png" alt="Connecté(e)s 탭: 접속자 목록과 닉네임, 나이, 성별로 검색" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s(접속자): 닉네임 또는 도시, 나이, 성별로 검색.</figcaption></figure> <figure><img src="../images/private.png" alt="옵션과 특수 스마일리 팔레트가 있는 1:1 대화창" width="1024" height="700" loading="lazy"><figcaption>1:1 대화창, 그 옵션, 그리고 특수 스마일리.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="휴대폰에서 본 CaraChat" width="390" height="760" loading="lazy"><figcaption>휴대폰에서.</figcaption></figure> </div> <h2>되살아난 것들</h2> <div class="grid"> <div class="card"> <ul> <li><strong>애플릿의 인터페이스</strong>를 똑같이 다시 그렸습니다. Salons(대화방), Connecté(e)s(접속자), Options, Ami(e)s(친구) 탭, 대화방, 1:1 대화마다 하나씩(최대 20개) 주황색으로 바뀌는 탭, « Dialogue »와 « Membres du salon »(대화방 멤버) 프레임, « Message privé »(개인 메시지), « Pas de nouveaux PVs »(새 1:1 대화 거부), « Problème de comportement »(비매너 신고).</li> <li><strong>휴대폰</strong>에서도, 14개 언어로 사용할 수 있습니다(브라우저 언어, Options 탭에서 변경).</li> <li><strong>대화방</strong>: 상설 대화방과 회원이 만든 대화방, 공개 또는 비공개. 가득 찬 대화방(40명)은 « Salon* »으로 넘쳐 흐릅니다.</li> <li><strong>1:1 대화</strong>: 닉네임을 더블클릭하거나, 대화방에서 <code>/닉네임 메시지</code>를 입력.</li> <li><strong>검색</strong>: 닉네임 또는 도시로, 나이대와 성별도 지정 가능.</li> <li><strong>색깔</strong>(무지개를 포함해 12가지)과 크기(물결 포함), 프로필에 따라 색이 입혀지는 닉네임, 누가 말을 걸면 굵게 표시되는 내 닉네임.</li> <li><strong>관리</strong>: 강제 퇴장, 관리자 호출, 상대 무시하기, « 새 1:1 대화 거부 », 바쁨.</li> </ul> </div> <figure> <img src="../images/login.png" alt="접속 창: 닉네임, 나이, 도시, 성별, 서버" width="520" height="447"> <figcaption>접속: 내 프로필과 서버.</figcaption> </figure> </div> <h2>원조 스마일리</h2> <p>스마일리는 이미지가 아니라 그림을 그리는 코드였습니다. 그 코드를 애플릿에서 읽어 내어 픽셀 단위로 그대로 재현했습니다. 눈 <code>:;8B%</code>, 얼굴을 고르는 코 <code>-o#!*$</code>(광대, 산타, 맥주잔, 가면…), 입 <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. 숫자는 얼굴에 색을 입히고(<code>:-)2</code>), <code>#c</code> / <code>#d</code> 는 손을 더하며, <code>#00</code> 부터 <code>#14</code> 까지는 그림입니다: 폭탄, 곰 인형, 전나무, 돌고래, 하트 <code>#13</code>… 그리고 « Smileys » 팔레트의 이미지 60장(햄버거 <code>@00</code>, 하트 <code>@11</code>, 케이크 <code>@09</code>…)은 원본 <code>smiley.gif</code>에서 가져왔습니다.</p> <figure> <img src="../images/smileys.png" alt="그려진 스마일리가 들어간 대화방의 문장: 얼굴, 하트, 전나무, 음표" width="900" height="319"> </figure> <h2>원본 사용 설명서</h2> <p>Caramail 실시간 채팅의 온라인 도움말(1999년)을 프랑스어 그대로 옮겨 두었습니다: <a href="../aide.html">실시간 채팅이란, 공개 또는 비공개 대화방 만들기, 개인 메시지 보내기(프랑스어 도움말)</a>.</p> <h2>서버</h2> <p><strong>CaraChat Serveur</strong> 서버는 2012년 소스를 바탕으로 PHP 8로 다시 작성했고, 데이터베이스 없이 jumphp.net의 Docker에서 돌아갑니다. 애플릿의 프로토콜(프레임당 한 줄, 탭으로 구분된 필드)을 그대로 사용하며, 예전처럼 TCP로, 또는 443번 포트의 WebSocket(<code>wss://caramail.jumphp.net/ws</code>)으로 접속합니다. 방화벽 뒤에서도 연결이 통과합니다.</p> <a class="play" href="../play/?lang=ko">CaraChat 열기</a></main><footer class="wrap">CaraChat은 JumPHP로 만든 비공식 재현작입니다. 원본 애플릿(net.spray.chat, 2002년)과 PHP 서버 « NewCaraChat »(2012년)의 권리는 각 저작자에게 있습니다.</footer></body></html>