pandoli365
/
bibimbap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(redesign): 약관 sticky 목차 + 조항 카드 구조 

terms.jsp에 .terms grid + .terms-toc sticky 목차(앵커 #a1~#a10)
신규 추가, h2→h3 변환·section id 부여. 조항 본문 텍스트는 무손실
보존(전문 유지), 구조 래핑만. 자체 head/include 보존.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
이정수 2026-06-30 16:22:09 +09:00
parent f266aeef9b
commit 29182a3124
1 changed files with 159 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
src/main/webapp/WEB-INF/views/terms.jsp
View File

@ -64,32 +64,68 @@
.policy-doc__body { .policy-doc__body {
padding: 1.35rem; padding: 1.35rem;
} }
.policy-section + .policy-section { /* terms layout */
margin-top: 1.55rem; .terms {
padding-top: 1.55rem; display: grid;
border-top: 1px solid var(--border); grid-template-columns: 200px 1fr;
gap: 28px;
} }
.policy-section h2 { .terms-toc {
margin: 0 0 0.7rem; position: sticky;
top: 24px;
align-self: start;
border-right: 1px solid var(--border);
padding-right: 8px;
}
.terms-toc .toc-title {
font-size: 11px;
letter-spacing: .12em;
color: var(--text-muted);
margin-bottom: 10px;
text-transform: uppercase;
}
.terms-toc a {
display: block;
font-size: 13.5px;
color: var(--text-muted);
padding: 7px 0 7px 14px;
text-decoration: none;
}
.terms-toc a:hover { color: var(--text); }
.terms-toc a.on {
color: var(--accent);
font-weight: 700;
border-left: 2px solid var(--accent);
padding-left: 12px;
}
.terms-body section {
padding: 18px 0;
border-bottom: 1px solid var(--border);
scroll-margin-top: 24px;
}
.terms-body section:last-child { border-bottom: none; }
.terms-body h3 {
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.35; font-weight: 800;
color: var(--text);
margin: 0 0 0.7rem;
} }
.policy-section p, .terms-body p,
.policy-section li { .terms-body li {
color: var(--text-muted); color: var(--text-muted);
font-size: 0.925rem; font-size: 0.925rem;
line-height: 1.75; line-height: 1.75;
} }
.policy-section p { .terms-body p { margin: 0.45rem 0 0; }
margin: 0.45rem 0 0; .terms-body ul,
} .terms-body ol {
.policy-section ul,
.policy-section ol {
margin: 0.6rem 0 0; margin: 0.6rem 0 0;
padding-left: 1.2rem; padding-left: 1.2rem;
} }
.policy-section strong { .terms-body strong { color: var(--text); }
color: var(--text); @media (max-width: 720px) {
.terms { grid-template-columns: 1fr; }
.terms-toc { position: static; border-right: none; }
} }
</style> </style>
</head> </head>
@ -102,91 +138,113 @@
<p>시행일: 2026년 4월 16일</p> <p>시행일: 2026년 4월 16일</p>
</header> </header>
<div class="policy-doc__body"> <div class="policy-doc__body">
<section class="policy-section"> <div class="terms">
<h2>제1조 (목적)</h2>
<p>본 약관은 개인 개발자(이하 "운영자")가 제공하는 웹 서비스 '비빔밥'(이하 "서비스")의 이용 조건 및 절차, 이용자와 운영자의 권리, 의무 및 책임 사항을 규정함을 목적으로 합니다.</p> <%-- 목차 (앵커 링크) --%>
</section> <nav class="terms-toc">
<section class="policy-section"> <div class="toc-title">목차</div>
<h2>제2조 (용어의 정의)</h2> <a class="on" href="#a1">제1조 목적</a>
<ol> <a href="#a2">제2조 용어의 정의</a>
<li>"서비스"란 운영자가 개발한 웹게임을 게재하고 이용자들이 소통할 수 있는 커뮤니티 공간을 제공하는 웹사이트를 의미합니다.</li> <a href="#a3">제3조 약관의 게시와 개정</a>
<li>"이용자"란 본 약관에 따라 운영자가 제공하는 서비스를 이용하는 회원 및 비회원을 말합니다.</li> <a href="#a4">제4조 서비스 제공 및 변경</a>
<li>"회원"이란 서비스에 접속하여 본 약관에 동의하고 계정을 생성하여 서비스를 이용하는 자를 말합니다.</li> <a href="#a5">제5조 회원가입 및 계정 관리</a>
</ol> <a href="#a6">제6조 이용자의 의무</a>
</section> <a href="#a7">제7조 게시물의 저작권</a>
<section class="policy-section"> <a href="#a8">제8조 이용 제한 및 해지</a>
<h2>제3조 (약관의 게시와 개정)</h2> <a href="#a9">제9조 책임 제한</a>
<ol> <a href="#a10">제10조 준거법 및 관할법원</a>
<li>운영자는 본 약관의 내용을 이용자가 쉽게 알 수 있도록 서비스 초기 화면에 게시합니다.</li> </nav>
<li>운영자는 관련 법령을 위배하지 않는 범위에서 본 약관을 개정할 수 있습니다.</li>
<li>약관이 개정될 경우 적용 일자 및 개정 사유를 명시하여 현행 약관과 함께 서비스 내에 공지합니다.</li> <%-- 본문 (조항) --%>
</ol> <div class="terms-body">
</section> <section id="a1">
<section class="policy-section"> <h3>제1조 (목적)</h3>
<h2>제4조 (서비스의 제공 및 변경)</h2> <p>본 약관은 개인 개발자(이하 "운영자")가 제공하는 웹 서비스 '비빔밥'(이하 "서비스")의 이용 조건 및 절차, 이용자와 운영자의 권리, 의무 및 책임 사항을 규정함을 목적으로 합니다.</p>
<ol> </section>
<li>서비스는 웹게임 게재 및 커뮤니티 기능을 기본으로 제공하며, 운영자의 판단에 따라 새로운 기능을 추가하거나 기존 기능을 변경할 수 있습니다.</li> <section id="a2">
<li>본 서비스는 이용자에게 무료로 제공됩니다. 다만, 서비스 운영상 필요한 경우 일부 기능을 유료화하거나 광고를 게재할 수 있으며, 이 경우 사전에 공지합니다.</li> <h3>제2조 (용어의 정의)</h3>
</ol> <ol>
</section> <li>"서비스"란 운영자가 개발한 웹게임을 게재하고 이용자들이 소통할 수 있는 커뮤니티 공간을 제공하는 웹사이트를 의미합니다.</li>
<section class="policy-section"> <li>"이용자"란 본 약관에 따라 운영자가 제공하는 서비스를 이용하는 회원 및 비회원을 말합니다.</li>
<h2>제5조 (회원가입 및 계정 관리)</h2> <li>"회원"이란 서비스에 접속하여 본 약관에 동의하고 계정을 생성하여 서비스를 이용하는 자를 말합니다.</li>
<ol> </ol>
<li>이용자는 운영자가 정한 가입 양식에 따라 회원정보를 기입함으로써 회원가입을 신청합니다.</li> </section>
<li>모든 회원은 반드시 본인의 정보를 제공하여야 하며, 타인의 정보를 도용할 경우 서비스 이용 제한 및 관련 법령에 따른 처벌을 받을 수 있습니다.</li> <section id="a3">
<li>회원은 자신의 계정과 비밀번호를 관리할 책임이 있으며, 이를 제3자가 이용하도록 하여서는 안 됩니다.</li> <h3>제3조 (약관의 게시와 개정)</h3>
</ol> <ol>
</section> <li>운영자는 본 약관의 내용을 이용자가 쉽게 알 수 있도록 서비스 초기 화면에 게시합니다.</li>
<section class="policy-section"> <li>운영자는 관련 법령을 위배하지 않는 범위에서 본 약관을 개정할 수 있습니다.</li>
<h2>제6조 (이용자의 의무 및 금지 행위)</h2> <li>약관이 개정될 경우 적용 일자 및 개정 사유를 명시하여 현행 약관과 함께 서비스 내에 공지합니다.</li>
<p>이용자는 서비스 이용 시 다음 각호의 행위를 하여서는 안 됩니다.</p> </ol>
<ol> </section>
<li>서비스의 안정적인 운영을 방해할 목적으로 하는 데이터 마이닝, 크롤링, 또는 비정상적인 접근 행위</li> <section id="a4">
<li>타인을 비방하거나 명예를 훼손하는 게시물을 작성하는 행위</li> <h3>제4조 (서비스의 제공 및 변경)</h3>
<li>타인의 저작권 등 지식재산권을 침해하는 행위 (저작권 침해 게임물이나 게시물 게재 등)</li> <ol>
<li>공공질서 및 미풍양속에 반하는 정보를 유포하는 행위</li> <li>서비스는 웹게임 게재 및 커뮤니티 기능을 기본으로 제공하며, 운영자의 판단에 따라 새로운 기능을 추가하거나 기존 기능을 변경할 수 있습니다.</li>
<li>기타 관계 법령 및 운영정책에 위배되는 행위</li> <li>본 서비스는 이용자에게 무료로 제공됩니다. 다만, 서비스 운영상 필요한 경우 일부 기능을 유료화하거나 광고를 게재할 수 있으며, 이 경우 사전에 공지합니다.</li>
</ol> </ol>
</section> </section>
<section class="policy-section"> <section id="a5">
<h2>제7조 (게시물의 저작권)</h2> <h3>제5조 (회원가입 및 계정 관리)</h3>
<ol> <ol>
<li>회원이 서비스 내에 게시한 게시물의 저작권은 해당 게시물의 저작자에게 귀속됩니다.</li> <li>이용자는 운영자가 정한 가입 양식에 따라 회원정보를 기입함으로써 회원가입을 신청합니다.</li>
<li>운영자는 서비스의 홍보 및 운영 목적으로 회원의 게시물을 노출하거나 복제, 수정하여 사용할 수 있습니다.</li> <li>모든 회원은 반드시 본인의 정보를 제공하여야 하며, 타인의 정보를 도용할 경우 서비스 이용 제한 및 관련 법령에 따른 처벌을 받을 수 있습니다.</li>
<li>회원은 서비스에 저작권 문제가 있는 게시물을 올려서는 안 되며, 이로 인해 발생하는 법적 책임은 게시자 본인에게 있습니다.</li> <li>회원은 자신의 계정과 비밀번호를 관리할 책임이 있으며, 이를 제3자가 이용하도록 하여서는 안 됩니다.</li>
</ol> </ol>
</section> </section>
<section class="policy-section"> <section id="a6">
<h2>제8조 (서비스 이용 제한 및 해지)</h2> <h3>제6조 (이용자의 의무 및 금지 행위)</h3>
<ol> <p>이용자는 서비스 이용 시 다음 각호의 행위를 하여서는 안 됩니다.</p>
<li>회원은 언제든지 서비스 내 설정 메뉴를 통해 회원 탈퇴를 신청할 수 있습니다.</li> <ol>
<li>운영자는 회원이 제6조의 금지 행위를 한 경우, 사전 통보 없이 서비스 이용을 일시 정지하거나 계정을 삭제할 수 있습니다.</li> <li>서비스의 안정적인 운영을 방해할 목적으로 하는 데이터 마이닝, 크롤링, 또는 비정상적인 접근 행위</li>
</ol> <li>타인을 비방하거나 명예를 훼손하는 게시물을 작성하는 행위</li>
</section> <li>타인의 저작권 등 지식재산권을 침해하는 행위 (저작권 침해 게임물이나 게시물 게재 등)</li>
<section class="policy-section"> <li>공공질서 및 미풍양속에 반하는 정보를 유포하는 행위</li>
<h2>제9조 (책임 제한)</h2> <li>기타 관계 법령 및 운영정책에 위배되는 행위</li>
<ol> </ol>
<li>운영자는 천재지변, 서버 점검, 네트워크 장애 등 불가항력적인 사유로 서비스를 제공할 수 없는 경우 책임이 면제됩니다.</li> </section>
<li>운영자는 이용자 간 또는 이용자와 제3자 상호 간에 서비스를 매개로 하여 발생한 분쟁에 대해 개입할 의무가 없으며 이로 인한 손해를 배상할 책임이 없습니다.</li> <section id="a7">
</ol> <h3>제7조 (게시물의 저작권)</h3>
</section> <ol>
<section class="policy-section"> <li>회원이 서비스 내에 게시한 게시물의 저작권은 해당 게시물의 저작자에게 귀속됩니다.</li>
<h2>제10조 (준거법 및 관할법원)</h2> <li>운영자는 서비스의 홍보 및 운영 목적으로 회원의 게시물을 노출하거나 복제, 수정하여 사용할 수 있습니다.</li>
<ol> <li>회원은 서비스에 저작권 문제가 있는 게시물을 올려서는 안 되며, 이로 인해 발생하는 법적 책임은 게시자 본인에게 있습니다.</li>
<li>본 약관과 관련하여 발생한 분쟁에 대해서는 대한민국 법을 준거법으로 합니다.</li> </ol>
<li>서비스 이용으로 발생한 분쟁에 대해 소송이 제기될 경우 <strong>서울중앙지방법원</strong>을 전속 관할법원으로 합니다.</li> </section>
</ol> <section id="a8">
</section> <h3>제8조 (서비스 이용 제한 및 해지)</h3>
<section class="policy-section"> <ol>
<h2>부칙</h2> <li>회원은 언제든지 서비스 내 설정 메뉴를 통해 회원 탈퇴를 신청할 수 있습니다.</li>
<p>본 약관은 2026년 4월 16일부터 시행됩니다.</p> <li>운영자는 회원이 제6조의 금지 행위를 한 경우, 사전 통보 없이 서비스 이용을 일시 정지하거나 계정을 삭제할 수 있습니다.</li>
</section> </ol>
<section class="policy-section"> </section>
<h2>문의처</h2> <section id="a9">
<ul> <h3>제9조 (책임 제한)</h3>
<li>이메일: artbiit@naver.com</li> <ol>
</ul> <li>운영자는 천재지변, 서버 점검, 네트워크 장애 등 불가항력적인 사유로 서비스를 제공할 수 없는 경우 책임이 면제됩니다.</li>
</section> <li>운영자는 이용자 간 또는 이용자와 제3자 상호 간에 서비스를 매개로 하여 발생한 분쟁에 대해 개입할 의무가 없으며 이로 인한 손해를 배상할 책임이 없습니다.</li>
</ol>
</section>
<section id="a10">
<h3>제10조 (준거법 및 관할법원)</h3>
<ol>
<li>본 약관과 관련하여 발생한 분쟁에 대해서는 대한민국 법을 준거법으로 합니다.</li>
<li>서비스 이용으로 발생한 분쟁에 대해 소송이 제기될 경우 <strong>서울중앙지방법원</strong>을 전속 관할법원으로 합니다.</li>
</ol>
</section>
<section>
<h3>부칙</h3>
<p>본 약관은 2026년 4월 16일부터 시행됩니다.</p>
</section>
<section>
<h3>문의처</h3>
<ul>
<li>이메일: artbiit@naver.com</li>
</ul>
</section>
</div>
</div>
</div> </div>
</article> </article>
</main> </main>