새로운 질서 위키

친구/허성덕

<!doctype html>
<html lang=”ko”>
<head>
<meta charset=”utf-8” />
<meta name=”viewport” content=”width=device-width,initial-scale=1” />
<title>친구/허성덕</title>
<style>

root{

  • {box-sizing:border-box;}
    body{
    margin:0;
    background:var(—bg);
    color:var(—text);
    font-family:var(—mono);
    line-height:1.65;
    font-size:15px;
    padding-bottom:80px;
    }
    .container{max-width:860px;margin:0 auto;padding:24px;}

h1,h2,h3,h4{font-weight:700;margin:28px 0 12px;color:var(—accent);}
h1{font-size:22px;border-bottom:2px solid var(—border);padding-bottom:8px;}
h2{font-size:18px;border-bottom:1px solid var(—border);padding-bottom:4px;}
h3{font-size:16px;}
h4{font-size:15px;color:#000;}

p{margin:10px 0;}

nav.toc{border:1px solid var(—border);padding:12px;margin:20px 0;background:#fafafa;}
nav.toc h3{margin:0 0 8px;font-size:14px;color:var(—accent);}
nav.toc ul{margin:0;padding-left:16px;}
nav.toc li{margin:4px 0;}
nav.toc a{color:var(—accent);text-decoration:none;}

section{margin:32px 0;padding-bottom:12px;border-bottom:1px dashed var(—border);}
footer{margin-top:40px;padding:16px 0;border-top:1px solid var(—border);color:var(—muted);font-size:13px;}

strong, em{color:var(—accent);}

html,body{height:auto;overflow-y:scroll;}
</style>
</head>
<body>
<div class=”container”>
<h1>친구/허성덕</h1>
<p style=”margin-top:-6px;color:var(—muted)”>허성덕을 웹 구성으로 소개한다.</p>

<nav class=”toc” aria-label=”목차”>
<h3>목차</h3>
<ul>
<li><a href=”#home”>1. Home</a></li>
<li><a href=”#about”>2. About</a></li>
<li><a href=”#portfolio”>3. Portfolio / Works</a></li>
<li><a href=”#error”>4. 404 / Error</a></li>
<li><a href=”#beta”>5. Beta</a></li>
<li><a href=”#contact”>6. Contact</a></li>
<li><a href=”#footer”>7. Footer</a></li>
</ul>
</nav>

<section id=”home”>
<h2>🏠 1. Home</h2>
<p>허성덕을 이루는 키워드: 콘텐츠, AI, 재미, 친절, 사우나.</p>
<p>하루 가운데 GPT 와 대화에 가장 많이 시간을 쏟고있다.</p>
<p>재미있다고 느끼는 모든 것을 사랑한다.</p>
<p>재미있다고 느끼지 못하는 것은 되도록 피하고 싶다.</p>
<p>웹은 생초보다.</p>
<p>무언가 다른 새로운 질서를 보고 이곳에 왔다.</p>
</section>

<section id=”about”>
<h2>👤 2. About</h2>
<p>허성덕은 맥락과 콘텐츠를 <strong>그럴싸하게</strong> 만드는 사람이다.</p>

<p>좋아서 만든 것들:</p>
<p>글(완성되지 못한 영화 각본, 방치된 브런치 3편), 이미지(아이패드의 낙서, 픽셀아트), 영상(영화·다큐, 색보정), 소리(lofi, 최근 시작한 DJing).</p>
<p>= 취향 찾기, 감정 발산, 동족 유대, 도구 습득.</p>

<p>목적이 있어서 만든 것들:</p>
<p>글(세일즈 콘텐츠), 이미지(마케팅 소재, 공고, 웹툰), 영상(브랜딩·바이럴, 30초 이하 숏폼).</p>
<p>= 데이터, 테크닉, 최적화, 후킹, 도구.</p>

<p>+ 최근 2년 내 모든 AI 적극 수용중</p>
<p>그리고 ‘새로운 질서’를 만났다.</p>
</section>

<section id=”portfolio”>
<h2>🗂️ 3. Portfolio / Works</h2>

<h3>1) 요상한 인터랙션 콘텐츠</h3>
<p>버디버디 시절, HTML로 만든 장난 같은 창.</p>
<p><em>“10번 클릭해야 없어지는 창”</em> 같은 것들.</p>
<p>처음 만난 HTML은 놀이였다.</p>
<p>내가 만든 것으로 친구들과 놀 수 있다는 사실이 좋았다.</p>
<p>지금도 이상한 것을 좋아한다.</p>

<!— ▼▼▼ 시간떼우기 Win95 팝업 시작 ▼▼▼ —>
<style>
#w95-popup {
width: 300px;
background: #c0c0c0;
border: 2px solid #000;
font-family: “MS Sans Serif”, sans-serif;
position: relative;
box-shadow: 4px 4px #000;
margin: 40px auto;
display: none;
}
#w95-title {
background: #000080;
color: white;
padding: 4px 6px;
font-size: 14px;
}
.w95-btn {
padding: 4px 10px;
border: 2px solid #fff;
border-right-color: #000;
border-bottom-color: #000;
background: #e0e0e0;
cursor: pointer;
font-family: “MS Sans Serif”, sans-serif;
}
</style>

<div style=”text-align:center; margin:20px 0;”>
<button class=”w95-btn” onclick=”openPopup()”>시간 떼우기 시작</button>
</div>

<div id=”w95-popup”>
<div id=”w95-title”>비슷하지 않은 예시</div>

<div style=”padding:20px; font-size:14px; color:#000;”>
<p id=”w95-text”><b>네, 발표 시간 채우려고 만들었습니다.</b></p>
<p style=”margin-top:10px;”>현재 클릭 수: <span id=”w95-count”>0</span> / 10</p>
</div>

<div style=”padding:10px; text-align:center;”>
<button class=”w95-btn” id=”w95-btn”>클릭</button>
</div>
</div>

<script>
let wCount = 0;
const wBtn = document.getElementById(“w95-btn”);
const wText = document.getElementById(“w95-text”);
const wCountSpan = document.getElementById(“w95-count”);
const wBox = document.getElementById(“w95-popup”);

const messages = [
“네, 발표 시간 채우려고 만들었습니다.”,
“2번 눌렀습니다.”,
“10번 눌러야 끝납니다.”,
“저도 왜 이걸 넣었는지 모르겠습니다.”,
“시간은 잘 가고 있나요?”,
“부디 이 소개가 잘 끝나길 원합니다.”,
“이 정도면 노력한 거 아닌가요?”,
“처음에는 기발하다고 생각했습니다.”,
“곧 끝납니다.”,
“마지막 클릭입니다. 놓아드립니다.”
];

function openPopup() {
wBox.style.display = “block”;
resetPopup();
}

function resetPopup() {
wCount = 0;
wText.innerHTML = messages[0];
wCountSpan.textContent = 0;
}

wBtn.addEventListener(“click”, () => {
wCount++;

if (wCount <= 10) {
  wText.innerHTML = messages[wCount - 1];
  wCountSpan.textContent = wCount;
}

if (wCount >= 10) {
  wBox.style.display = "none";
  resetPopup();
}

});
</script>
<!— ▲▲▲ 시간떼우기 Win95 팝업 끝 ▲▲▲ —>

  <h3>2) 개발 교육 강의 제작</h3>
  <p>코로나 언택트 시대, 교육 영상을 촬영할 일이 많았다.</p>
  <p>개발자들의 교육 영상을 만들게 됐다.</p>
  <p>그 때 들은 말들은 아직도 대부분 모르고있다.</p>
  <p>git, github, numpy, 자바스크립트…</p>
  <p>흥미는 없었지만, 지금 새로운 질서에 들어온 데 완전히 무관했다고 말하긴 어렵다.</p>

  <h3>3) 웹 콘텐츠 생산자</h3>
  <p>플랫폼 운영중.</p>
  <p>워드프레스 CMS로 개발 없이 콘텐츠만 관리하면 되는 환경이었다.</p>
  <p>그리고 SEO 때문에 HTML을 마주하기 시작했다.</p>
  <p>여기서는 놀이가 아닌 생존 스킬이다.</p>
  <p>어느 날, 에디터에는 없는 묘한 콘텐츠들을 발견했다.</p>
  <p>그 세계는 자유로워 보였다.</p>
  <p>웹을 돌아다니다 구홍의 작업을 보며 깨달았다.</p>
  <p><strong>웹도 콘텐츠가 된다.</strong></p>
  <p>올타쿠나.</p>
</section>

<section id="error">
  <h2>⚠️ 4. 404 / Error</h2>
  <p>허성덕.music</p>
  <p>허성덕.menswear</p>
  <p>허성덕.video</p>
  <p>허성덕.color</p>
  <p>허성덕.commerce</p>
  <p>= 404</p>
  <p>관심과 취향이 많아서 버그가 생긴다.</p>
  <p>그래도 하나의 깃발을 세우고 다음 점으로 이동한다.</p>
  <p>디버깅은 금융 치료로 가능했다.</p>
  <p>재미만 좇았지만, 이제는 쓸만한 생존 기술로 다시 빌드업중이다.</p>
</section>

<section id="beta">
  <h2>? 5. Beta</h2>
  <p>앞으로는 허성덕에게 웹은 느닷없는 놀이를 가능하게 하는 도구가 될것이다.</p>
  <p>개인의 놀이 → 사람의 모임 → 커뮤니티 → 비즈니스.</p>
  <p>이게 사우나였으면 좋겠는 바람이 있다.</p>
</section>

<section id="contact">
  <h2>📬 6. Contact</h2>
  <p>예술가, 사회성 있는 또라이, 자기 일을 사랑하는 사람들과 연결되고 싶다.</p>
  <p>(새로운 질서의 사람들은 대체로 멋있다)</p>
</section>

<section id="footer">
  <h2>🔗 7. Footer</h2>
  <p>이 모든 시도는 결국 동족을 찾기 위한 여정이다.</p>
  <p>북마크해두고 싶은 웹을 만들고 싶다.</p>
</section>

<footer>
  <div>© 허성덕</div>
  <div>2025년 11월 28일 작성됨.</div>
</footer>

</div>
</body>
</html>

상위 문서

다른 하위 문서