Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
view/hinana/studio.ejs
공개 가능
1
<!doctype html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
5
<title>Hinana Studio — 상상을 작품으로</title>
6
<meta name="description" content="영상, 오디오, 이미지부터 이야기까지. Hinana Studio, Eco, Photo, Image, Story, Novel을 만나보세요.">
7
<meta property="og:type" content="website"><meta property="og:title" content="Hinana Studio — 상상을 작품으로"><meta property="og:description" content="당신의 다음 작품을 위한 여섯 가지 작업실."><meta property="og:url" content="https://hinana.moe/hinana/studio"><meta property="og:image" content="https://hinana.moe/image/studio/story-screen.webp">
8
<meta name="twitter:card" content="summary_large_image"><meta name="theme-color" content="#111218">
9
<link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="canonical" href="https://hinana.moe/hinana/studio">
10
<link rel="stylesheet" href="/css/site-ui.css?v=3"><link rel="stylesheet" href="/css/site-app.css?v=1"><link rel="stylesheet" href="/css/studio.css?v=2">
11
<script src="/js/studio.js?v=1" defer></script>
12
</head>
13
<body class="ui-shell <%= theme==='dark'?'dark-mode':'' %>" data-ui-page="studio">
14
<%- include('partials/site-header', {uiPage:'studio'}) %>
15
<main class="studio-page" id="ui-content" tabindex="-1">
16
<nav class="studio-nav" aria-label="Studio 페이지 메뉴"><a class="studio-wordmark" href="#studio-top"><span class="studio-mark" aria-hidden="true">h.</span><span>HINANA <b>STUDIO</b></span></a><div><a href="#family">시리즈 소개</a><a href="#workspace">작업 화면</a><a href="#next-chapter">Novel 만나보기 <span aria-hidden="true">↗</span></a></div></nav>
17
<section class="studio-hero" id="studio-top" aria-labelledby="studio-heading">
18
<div class="studio-eyebrow"><span></span> A LITTLE STUDIO. ENDLESS POSSIBILITIES.</div>
19
<h1 id="studio-heading">상상한 순간을,<br><em>당신의 작품으로.</em></h1>
20
<p>영상의 한 장면, 마음에 남는 소리, 아직 쓰지 않은 이야기.<br class="studio-desktop-break"> Hinana Studio에서 당신만의 무언가를 만들어 보세요.</p>
21
<a href="#family" class="studio-primary">나의 작업실 찾기 <span aria-hidden="true">↓</span></a>
22
<div class="studio-icon-line" aria-label="Hinana Studio 제품군"><% products.forEach(product=>{ %><a href="#product-<%= product.id %>" aria-label="<%= product.name %><%= product.upcoming?' · 출시 예정':'' %>"><img src="/image/studio/<%= product.icon %>" alt="" width="64" height="64"><span><%= product.shortName %></span></a><% }); %></div>
23
</section>
24
<section class="studio-workspace" id="workspace" aria-labelledby="workspace-title">
25
<div class="studio-section-heading"><div><span class="studio-eyebrow">INSIDE THE STUDIO</span><h2 id="workspace-title">만들고 싶은 마음이 머무는 곳.</h2></div><p>실제 작업 화면으로 만나보세요.</p></div>
26
<div class="studio-tabs" role="tablist" aria-label="제품 작업 화면"><% products.filter(p=>!p.upcoming).forEach((product,index)=>{ %><button type="button" role="tab" id="tab-<%= product.id %>" aria-controls="screen-<%= product.id %>" aria-selected="<%= index===0 %>" tabindex="<%= index===0?'0':'-1' %>" style="--product-color:<%= product.color %>"><span class="studio-tab-dot" aria-hidden="true"></span><%= product.shortName %></button><% }); %></div>
27
<% products.filter(p=>!p.upcoming).forEach((product,index)=>{ %>
28
<div class="studio-screen-panel" role="tabpanel" id="screen-<%= product.id %>" aria-labelledby="tab-<%= product.id %>" tabindex="0" <%- index===0?'':'hidden' %> style="--product-color:<%= product.color %>">
29
<button type="button" class="studio-screen-zoom" data-studio-image="/image/studio/<%= product.screen %>" data-studio-title="<%= product.name %> 작업 화면" aria-label="<%= product.name %> 작업 화면 확대"><img src="/image/studio/<%= product.screen %>" alt="<%= product.name %>의 <%= product.features.join(', ') %> 작업 화면" width="1600" height="1000" <%- index===0?'fetchpriority="high"':'loading="lazy"' %>><span class="studio-zoom-label">크게 보기 <span aria-hidden="true">↗</span></span></button>
30
<div class="studio-screen-caption"><div><strong><%= product.name %></strong><span><%= product.headline %></span></div><a href="#product-<%= product.id %>">제품 알아보기 <span aria-hidden="true">↗</span></a></div>
31
</div><% }); %>
32
</section>
33
<section class="studio-family" id="family" aria-labelledby="family-title">
34
<div class="studio-section-heading"><div><span class="studio-eyebrow">FIND YOUR CREATIVE SPACE</span><h2 id="family-title">하고 싶은 일에 맞는,<br>나만의 Studio.</h2></div><p>가벼운 편집부터 깊이 있는 창작까지.<br>당신의 다음 작업에 어울리는 도구를 골라보세요.</p></div>
35
<div class="studio-products"><% products.filter(p=>!p.upcoming).forEach((product,index)=>{ %>
36
<article class="studio-product" id="product-<%= product.id %>" style="--product-color:<%= product.color %>">
37
<div class="studio-product-top"><img src="/image/studio/<%= product.icon %>" alt="" width="64" height="64" loading="lazy"><span><%= product.category %></span><span class="studio-product-index">0<%= index+1 %></span></div>
38
<h3><%= product.name %></h3><h4><%= product.headline %></h4><p><%= product.description %></p>
39
<ul><% product.features.forEach(feature=>{ %><li><%= feature %></li><% }); %></ul>
40
<div class="studio-product-links"><button type="button" data-studio-select="<%= product.id %>">작업 화면 보기 <span aria-hidden="true">↗</span></button><button type="button" class="studio-about-link" data-studio-image="/image/studio/<%= product.about %>" data-studio-title="<%= product.name %> 제품 정보">제품 정보</button></div>
41
</article>
42
<% }); %>
43
44
</div>
45
</section>
46
<section class="studio-compare" aria-labelledby="compare-title"><div><span class="studio-eyebrow">PHOTO OR IMAGE?</span><h2 id="compare-title">같은 이미지,<br>서로 다른 작업실.</h2><p>무엇을 만들고 싶은지에 따라 골라보세요.</p></div><div class="studio-compare-options"><a href="#product-photo"><span>01 / EDIT</span><h3>간단히 편집하고 싶다면 <b>Photo</b></h3><p>이미지를 자르고, 글자를 더하고, 레이어를 쌓는 작업에.</p><span aria-hidden="true">↗</span></a><a href="#product-image"><span>02 / DEVELOP</span><h3>사진의 분위기를 다듬고 싶다면 <b>Image</b></h3><p>빛과 색, 톤과 디테일을 섬세하게 보정하는 작업에.</p><span aria-hidden="true">↗</span></a></div></section>
47
<section class="studio-next" id="next-chapter" aria-labelledby="novel-heading"><button type="button" class="studio-novel-preview" data-studio-image="/image/studio/novel-reader.webp" data-studio-title="Hinana Studio Novel 독서 미리보기" aria-label="Hinana Studio Novel 독서 미리보기 확대"><img src="/image/studio/novel-reader.webp" alt="Hinana Studio Novel의 글꼴과 여백, 글 방향을 설정하는 독서 미리보기 화면" width="1600" height="1000" loading="lazy"><span>독서 미리보기 <span aria-hidden="true">↗</span></span></button><div><span class="studio-coming">출시</span><span class="studio-eyebrow">WRITE. PREVIEW. PUBLISH.</span><h2 id="novel-heading">쓴다는 즐거움에서,<br><em>읽는다는 경험으로.</em></h2><h3>Hinana Studio Novel</h3><p>원고를 쓰고, 글꼴과 여백, 가로쓰기와 세로쓰기를 설정하세요.<br>스마트폰부터 데스크톱까지 읽는 모습을 비교하고,<br>웹으로 내보내 나의 글을 하나의 독서 경험으로 전할 수 있습니다.</p><button type="button" class="studio-primary" data-studio-select="novel">Novel 작업 화면 보기 <span aria-hidden="true">↗</span></button></div></section>
48
<section class="studio-closing"><span class="studio-eyebrow">YOUR IDEAS, YOUR STUDIO.</span><h2>좋아하는 것을 만드는 시간.</h2><p>당신의 다음 작품이 이곳에서 시작되기를.</p><a class="studio-primary" href="#family">Hinana Studio 시리즈 살펴보기 <span aria-hidden="true">↑</span></a></section>
49
<footer class="studio-footer"><a class="studio-wordmark" href="#studio-top"><span class="studio-mark" aria-hidden="true">h.</span> HINANA STUDIO</a><span>만든 사람, 비나래.</span><a href="/">비나래 아카이브 <span aria-hidden="true">↗</span></a><small>© 2026 비나래. All rights reserved.</small></footer>
50
</main>
51
<dialog class="studio-lightbox" id="studio-lightbox" aria-labelledby="studio-lightbox-title"><div class="studio-lightbox-toolbar"><h2 id="studio-lightbox-title">작업 화면</h2><button type="button" id="studio-lightbox-close" aria-label="이미지 닫기">닫기 <span aria-hidden="true">×</span></button></div><div class="studio-lightbox-body"><img id="studio-lightbox-image" alt=""></div></dialog>
52
</body></html>
53