프레임워크 없음
테마 전환, 스크롤 등장, 커서를 따라가는 빛, 체험 구역까지 script.js 206줄에 들어 있습니다. 컨셉을 보여 주는 한 페이지에는 이 정도가 맞다고 봤습니다.
WYD
이름을 먼저 보이면건네지 못하는 말이 있습니다.먼저 말하고, 나중에 밝힙니다.
ABOUT · WHAT IT DOES
WYD 는 urdoing 이 wyd 라는 이름이던 시절의 컨셉 사이트입니다. 전시의 시대에 왜 인사가 어려운지 먼저 묻고, 공개 계정과 익명 계정을 함께 가진 ‘검증된 이중 정체성’을 답으로 내놓습니다. 먼저 말 거는 익명, 대화 뒤의 공개(Reveal), 안전과 존엄 — 세 원칙을 설명한 뒤, 페이지 안에서 글과 이미지를 직접 올려 보게 합니다.
프레임워크도 빌드도 없는 파일 세 개입니다. 여기서 세운 원칙은 urdoing 에서 서버 함수와 데이터베이스 권한이 됐고, 그 저장소는 지금도 wyd-monorepo 라는 이름을 달고 있습니다.
01 — First screen
스크롤 한 번에 질문 하나.
- 첫 화면 — “The Beginning of True Connection”공개 카드와 익명 카드 두 장이 겹쳐 있고, 마우스를 따라 조금씩 움직입니다.
- 전시의 시대, 인사가 왜 무서운가사진 한 장과 팔로워 목록이 평판의 증거가 되는 상황을 문제로 적습니다.
- ‘재미로만’의 한계NGL · Asked · Soul 같은 익명 서비스가 깊이 대신 오락을 골랐다고 짚습니다.
주장하고, 설명하고, 해 보게 합니다.
문제를 세운 뒤에는 답을 도식 하나로, 원칙을 세 단으로, 마지막엔 입력창 하나로 보여 줍니다.
- ① The answer
검증된 두 번째 신분 (Verified Dual-Identity)
부계정이 아니라 시스템이 확인한 두 번째 페르소나라는 주장입니다. Real Me 와 Persona 두 원을 한 줄로 잇고, 아래에 ‘신뢰를 위해 기술적으로 연결, 자유를 위해 사회적으로 분리’라고 적습니다.
- ② Principles
먼저 대화하고, 나중에 밝힌다
대화로 신뢰가 쌓이면 Reveal 을 제안해 진짜 프로필을 보여 줍니다. ‘누구인지 확인한 뒤 대화’라는 순서를 뒤집는 것이 이 원칙의 요지이고, urdoing 에는 신분 공개 요청 기능으로 들어갔습니다.
- ③ Try it
읽지 말고 올려 본다
입력창에 글을 쓰고 이미지를 붙이면 미리보기가 뜨고, Post 를 누르면 목록 맨 위에 붙습니다. 모두 그 페이지 안에서만 일어나 서버로 가지 않고, 새로고침하면 사라집니다.
세 가지 원칙, 두 가지 테마.
원칙마다 글 한 단과 그림 하나를 짝지었습니다. 테마는 어두운 쪽이 기본이고, 밝은 쪽을 고르면 그 브라우저가 기억합니다.
먼저 다가가는 익명 (Active Anonymity)기다리는 익명이 아니라 먼저 다가가는 익명입니다. 영감을 준 사람이나 동료에게 프로필 대신 메시지로 먼저 말을 겁니다.
안전과 존중 (Safety & Dignity)받는 사람이 ‘누군지 몰라도 해칠 뜻은 없다’고 믿을 수 있어야 한다는 원칙입니다. 이 페이지에서는 문구로만 있는 약속이고, 신고·차단·뮤트는 urdoing 에서 실제 기능이 됐습니다.
밝은 테마오른쪽 위 해·달 버튼으로 바꿉니다. 색은 CSS 변수 한 벌을 data-theme 속성으로 갈아 끼우고, 고른 값은 localStorage 에 남습니다.
비전 (Vision)마지막 구역은 기능이 아니라 방향입니다. 남의 눈이 무서워 썼다 지우는 메시지를 멈추고, 대화 자체에 집중하자는 문장으로 끝납니다.
파일 세 개로 HTMLCSS 변수바닐라 JavaScriptIntersectionObserverFileReaderlocalStorageGoogle Fonts 만들었습니다.
빌드 단계가 없어서 index.html 을 열면 그대로 뜹니다. 바깥에서 받아 오는 것은 글꼴뿐입니다.
등장은 한 번만
IntersectionObserver 가 요소의 15% 가 보이면 active 클래스를 붙이고 바로 관찰을 끊습니다. 다시 스크롤해도 반복하지 않습니다.
입력은 이스케이프
체험 구역에 쓴 글은 &, <, >, 따옴표를 바꾼 뒤 화면에 붙입니다. 이미지는 FileReader 로 읽어 브라우저 안에서만 미리 봅니다.
테마는 변수 한 벌
색과 그림자를 :root 변수로 두고, 밝은 테마에서 같은 이름을 다시 정의합니다. 버튼은 html 의 속성 하나만 바꿉니다.
1,572줄 · HTML 256 + CSS 1,110 + JS 206
6개의 구역 · 첫 화면 아래
3가지 원칙
0개의 프레임워크 · 빌드 단계 없음
- ROLE
- 컨셉 · 카피 · 디자인 · 구현
- TECH
- HTML · CSS · JavaScript — 프레임워크 없음
- STRUCTURE
- 첫 화면 · 문제 · 한계 · 철학 · 원칙 셋 · 체험 · 비전
- THEMES
- 어두운 기본 + 밝은 테마
- RELATION
- urdoing 의 첫 이름 wyd 의 소개 사이트
- HISTORY
- git 없음 · 파일 세 개와 이미지 일곱 개
- STATUS
- INTERACTIVE PROTOTYPE
WHY
만들면서 스스로에게
만들면서 스스로에게
물은 것들.
왜 제품보다 사이트를 먼저 만들었나요?
두 신분 구조는 말로 설명하면 낯설게 들립니다. 익명인데 검증됐다는 게 무슨 뜻인지, 왜 둘이 한 계정이어야 하는지. 그래서 본격적으로 만들기 전에 문제·한계·답·원칙 순서로 한 페이지에 적어 봤습니다. 이 순서가 설득되지 않으면 제품도 설득되지 않는다고 봤습니다.
wyd 와 urdoing 은 무슨 관계인가요?
같은 제품의 앞과 뒤입니다. urdoing 저장소의 패키지 이름은 지금도 wyd-monorepo 이고, 웹의 언어 설정도 wyd-language 라는 이름으로 저장됩니다. 이 페이지의 Reveal 은 urdoing 의 신분 공개 요청이 됐고, ‘기술적으로는 연결, 사회적으로는 분리’는 서버만 읽을 수 있는 연결 표가 됐습니다.
체험 구역에 쓴 글은 어디로 가나요?
아무 데도 가지 않습니다. 글과 이미지는 그 탭의 화면에만 붙고, 서버도 저장소도 없습니다. 새로고침하면 사라집니다. 컨셉 사이트라서 ‘올려 보고 지우는’ 감각까지만 만들었습니다.
여기 적힌 약속은 다 지켜졌나요?
아닙니다. ‘Download App’ 버튼은 Coming Soon 이고, ‘24시간 AI 필터링’은 이 페이지의 문구일 뿐입니다. 실제로 만든 것은 urdoing 쪽에 있습니다 — 신고·차단·뮤트, 신분 공개 요청, 연결 정보 격리. 컨셉과 구현을 섞지 않으려고 여기 따로 적습니다.