← 랜딩 초안 만들기
남은 만들기 3회
우리가 일하는 방식 — 스튜디오 온
네 명이 일하는 디자인 스튜디오 소개 페이지. 일하는 방식을 보여주고 싶어. · 예시
고칠 곳을 말해 주세요
이 초안, 실제로 만들까요?
연락처를 남기면 스튜디오 온가 완성까지 도와드립니다.
파일 1개 · 3.5KB · JS 0건 · 외부 요청 0건
· 정화 결과 이상 없음
코드
HTML 한 장입니다. 그대로 올리면 바로 동작합니다. 자바스크립트도 외부 자원도 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>우리가 일하는 방식 — 스튜디오 온</title>
<style>
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
:root{--ink:#14161a;--ink2:#4b5260;--line:#e7e9ee;--accent:#1f5f52;--bg:#f7f8f7}
body{background:var(--bg);color:var(--ink)}
.top{padding:96px 0 40px}
h1{font-size:clamp(2rem,1.3rem+2.4vw,2.9rem);font-weight:800;letter-spacing:-.035em;
line-height:1.16;max-width:22ch}
.lede{font-size:1.05rem;color:var(--ink2);max-width:56ch;margin-top:20px}
section{padding:56px 0}
h2{font-size:1.35rem;font-weight:750;letter-spacing:-.02em;margin-bottom:20px}
.rules{display:grid;gap:0}
.rule{display:grid;grid-template-columns:56px 1fr;gap:0 22px;padding:24px 0;border-top:1px solid var(--line)}
.rule b{font-size:1.5rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rule h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.rule p{color:var(--ink2);font-size:.95rem}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.person{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.avatar{width:52px;height:52px;border-radius:999px;margin-bottom:14px;
background:linear-gradient(140deg,#cfe0da,#e4e7ea)}
.person h3{font-size:1rem;font-weight:700}
.person span{font-size:.85rem;color:var(--ink2)}
.quote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:0 16px 16px 0;padding:28px 30px;font-size:1.08rem;color:var(--ink)}
.foot{padding:48px 0;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink2)}
@media(max-width:620px){.top{padding:64px 0 32px}.rule{grid-template-columns:1fr;gap:6px}}
</style>
</head>
<body>
<div class="top"><div class="wrap">
<h1>작게 시작해서 오래 가는 것을 만듭니다</h1>
<p class="lede">스튜디오 온은 네 명이 일하는 작은 팀입니다.
한 번에 크게 만들기보다, 쓸 수 있는 것을 먼저 내놓고 계속 고치는 방식을 씁니다.</p>
</div></div>
<section><div class="wrap">
<h2>우리가 지키는 것</h2>
<div class="rules">
<div class="rule"><b>01</b><div><h3>먼저 띄운다</h3>
<p>완성한 뒤에 내놓으려 하면 대개 완성되지 않습니다. 빈 화면이라도 주소가 생기면 그때부터 고쳐집니다.</p></div></div>
<div class="rule"><b>02</b><div><h3>쓰는 사람에게 물어본다</h3>
<p>회의실에서 정한 것은 대체로 틀립니다. 실제로 쓰는 사람 옆에 앉아 보는 편이 빠릅니다.</p></div></div>
<div class="rule"><b>03</b><div><h3>넘겨줄 수 있게 만든다</h3>
<p>우리가 없어도 돌아가야 좋은 결과물입니다. 문서와 구조를 함께 남깁니다.</p></div></div>
</div>
</div></section>
<section><div class="wrap">
<div class="quote">"빨리 만들어 주셔서 좋았지만, 그보다 <strong>왜 이렇게 만들었는지</strong>를
알려주신 게 남았습니다." — 서점 문장</div>
</div></section>
<section><div class="wrap">
<h2>일하는 사람들</h2>
<div class="people">
<div class="person"><div class="avatar"></div><h3>김서연</h3><span>브랜드 · 제품 디자인</span></div>
<div class="person"><div class="avatar"></div><h3>박준호</h3><span>개발 · 인프라</span></div>
<div class="person"><div class="avatar"></div><h3>이하늘</h3><span>기획 · 콘텐츠</span></div>
<div class="person"><div class="avatar"></div><h3>최민석</h3><span>운영 · 고객 응대</span></div>
</div>
</div></section>
<div class="foot"><div class="wrap">스튜디오 온 · hello@studioon.example.com</div></div>
</body>
</html>
스튜디오 온이 만든 도구입니다.