Files
tront.noname.company/index-form.html
zenn 7748eb2973 연혁을 개발 역량 중심으로 정리하고 내용을 HTML로 분리
- 연도별 제목을 프로젝트와 개발 역량 중심으로 변경
- 모두의약국, BISPET, BEMS 등 서비스의 대상과 기능을 설명해 이해도 개선
- 반복되는 분류명, 강조 문구와 기술 태그를 제거하고 제목과 설명으로 간소화
- 설명 안의 핵심 기술과 서비스명을 강조하고 별도 연혁 스타일 추가
- 연혁 내용을 두 HTML 페이지로 옮기고 공통 스크립트는 탭 전환과 키보드 이동만 담당
- 변경된 스크립트와 연혁 스타일에 버전 URL을 적용하고 README에 편집 방법 기록

검증: JavaScript 문법 및 변경 공백 검사 통과
2026-10-07 11:35:04 +09:00

435 lines
48 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f5f5ef">
<meta name="description" content="2008년부터 이어온 기술의 연결. 트론트는 스마트 모빌리티, 산업 관제, Web3, 모바일·웹 플랫폼으로 비즈니스의 다음을 만듭니다.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tront.noname.company/index-form.html">
<meta property="og:image" content="https://tront.noname.company/assets/images/tront-logo.png">
<meta property="og:image:alt" content="TRONT — The road not taken">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://tront.noname.company/assets/images/tront-logo.png">
<meta property="og:title" content="TRONT — 기술로 연결하고, 가능성을 확장하다">
<meta property="og:description" content="스마트 모빌리티부터 디지털 플랫폼까지. 2008년부터 함께해 온 IT 솔루션 파트너, 주식회사 트론트.">
<title>TRONT — 기술로 연결하고, 가능성을 확장하다</title>
<link rel="icon" href="assets/images/tront-logo.png" type="image/png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="portfolio.css?v=780175b64ad9">
<link rel="stylesheet" href="company.css">
<script src="script.js?v=55c672584ac0" defer></script>
<script src="portfolio.js" defer></script>
<link rel="stylesheet" href="map-dialog.css">
<script src="map-dialog.js" defer></script>
<link rel="stylesheet" href="image-viewer.css">
<script src="image-viewer.js" defer></script>
<link rel="stylesheet" href="icons.css">
<link rel="stylesheet" href="journey.css?v=4a370cc28a98">
<link rel="stylesheet" href="contact-form.css">
<script src="contact-form.js" defer></script>
</head>
<body>
<!-- Shared arrow shape from assets/icons/arrow_right_alt.svg. -->
<svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true" focusable="false"><defs><symbol id="arrow-right-alt" viewBox="0 -960 960 960"><path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z"/></symbol></defs></svg>
<a class="skip-link" href="#main">본문으로 바로가기</a>
<div class="scroll-progress" aria-hidden="true"></div>
<header class="site-header">
<div class="header-inner wrap">
<a class="brand" href="#home" aria-label="트론트 홈"><img src="assets/images/tront-logo.png" width="400" height="155" alt="TRONT — The road not taken"></a>
<nav class="desktop-nav" aria-label="주요 메뉴">
<a href="#about">회사소개</a><a href="#expertise">사업영역</a><a href="#work">프로젝트</a><a href="#patents">특허</a><a href="#journey">걸어온 길</a>
</nav>
<a class="header-contact" href="#contact">프로젝트 문의 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a>
<button class="menu-toggle" aria-label="메뉴 열기" aria-controls="mobile-menu" aria-expanded="false"><span></span><span></span></button>
</div>
<nav id="mobile-menu" class="mobile-menu" aria-label="모바일 메뉴" hidden>
<a href="#about"><span>01</span>회사소개 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#expertise"><span>02</span>사업영역 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#work"><span>03</span>프로젝트 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#patents"><span>04</span>특허 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#journey"><span>05</span>걸어온 길 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#contact"><span>06</span>프로젝트 문의 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a>
<p>THE ROAD NOT TAKEN.<br>YOUR NEXT TECHNOLOGY PARTNER.</p>
</nav>
</header>
<main id="main">
<section id="home" class="hero wrap" aria-labelledby="hero-title">
<div class="hero-content">
<p class="eyebrow"><span class="status-dot"></span> CONNECTING IDEAS. CREATING IMPACT.</p>
<h1 id="hero-title">기술로 연결하고,<br><span>가능성을 확장하다.</span></h1>
<p class="hero-description">모빌리티부터 디지털 플랫폼까지.<br>비즈니스의 다음을 함께 만드는 기술 파트너, 트론트.</p>
<div class="hero-actions"><a class="button button-dark" href="#work">우리가 만든 변화 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a><a class="text-link" href="#expertise">우리의 기술 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--down" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a></div>
<div class="hero-bottom"><span class="tiny-label">INNOVATION SINCE</span><strong>2008<span class="small-star" aria-hidden="true">✳</span></strong><span class="hero-note">경험은 깊게.<br>시선은 더 멀리.</span></div>
</div>
<div class="hero-art" aria-label="서로 연결된 기술을 표현한 푸른 입체 궤도 그래픽" role="img">
<div class="art-grid" aria-hidden="true"></div>
<span class="art-coordinate coordinate-top" aria-hidden="true">[ TRONT / CONNECTED FUTURE ]</span>
<canvas id="connection-canvas" aria-hidden="true"></canvas>
<div class="orbit-label orbit-label-one" aria-hidden="true"><span></span>TECHNOLOGY</div>
<div class="orbit-label orbit-label-two" aria-hidden="true"><span></span>POSSIBILITY</div>
<div class="art-caption" aria-hidden="true"><span class="crosshair">+</span><span>INDEPENDENT IDEAS.<br>INFINITE CONNECTIONS.</span><span class="art-index">01 — 05</span></div>
</div>
<a class="scroll-cue" href="#about"><span class="scroll-line" aria-hidden="true"></span> SCROLL TO EXPLORE</a>
<button class="motion-toggle" aria-pressed="false" aria-label="그래픽 애니메이션 일시정지"><span aria-hidden="true">Ⅱ</span></button>
</section>
<div class="ticker" aria-hidden="true"><div class="ticker-track"><span>SMART MOBILITY <i>✳</i> DIGITAL PLATFORM <i>✳</i> CONNECTED FUTURE <i>✳</i> INDUSTRIAL INTELLIGENCE <i>✳</i> </span><span>SMART MOBILITY <i>✳</i> DIGITAL PLATFORM <i>✳</i> CONNECTED FUTURE <i>✳</i> INDUSTRIAL INTELLIGENCE <i>✳</i> </span></div></div>
<section id="about" class="about section wrap" aria-labelledby="about-title">
<div class="section-top reveal"><p class="section-label"><span>01 /</span> ABOUT TRONT</p><span class="side-note">기술에 대한 깊이, 사람을 향한 방향</span></div>
<div class="about-layout">
<div class="about-intro reveal"><h2 id="about-title">복잡한 기술을<br><span class="muted">의미 있는 경험으로.</span></h2><div class="about-signature" aria-hidden="true"><span>✳</span><span>CONNECTING POSSIBILITIES<br>SINCE 2008</span></div></div>
<div class="about-copy reveal"><p>트론트는 모바일, 웹, 애플리케이션을 넘어 산업과 일상을 연결하는 IT 솔루션 전문 기업입니다. 2008년의 첫걸음부터 다양한 산업 현장에서 쌓아온 경험으로, 고객의 아이디어를 작동하는 서비스로 만듭니다.</p><p>지능형 관제, 디지털 플랫폼, 미래 모빌리티까지.<br>기술의 경계를 넘나들며 비즈니스에 필요한 연결을 설계합니다.</p><a class="text-link" href="docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf" download="TRONT_회사소개서.pdf">트론트 회사소개서 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--down" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span><small>PDF · 9.2 MB</small></a></div>
</div>
<div class="company-profile reveal" aria-label="트론트 회사 개요 및 조직">
<div class="company-identity">
<p class="tiny-label">COMPANY AT A GLANCE</p>
<h3>주식회사 트론트<span>TRONT Co., Ltd.</span></h3>
<dl class="company-data">
<div><dt>설립일</dt><dd><time datetime="2008-12-01">2008년 12월 1일</time></dd></div>
<div><dt>사업분야</dt><dd>모바일 솔루션 · 웹 서비스 · 산업용 애플리케이션 개발</dd></div>
<div><dt>소재지</dt><dd>대구광역시 북구 경대로17길 47<br>IT융합산업빌딩 1203호</dd></div>
</dl>
<a class="company-patent-link" href="#patents"><span class="company-link-mark" aria-hidden="true">✳</span>기술 연구와 특허 살펴보기<span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a>
</div>
<div class="company-organization">
<div class="organization-heading">
<div><p class="tiny-label">PEOPLE & ORGANIZATION</p><h3>함께 만드는 전문 조직</h3></div>
<div class="organization-people"><strong><span data-count="18">18</span><span>명</span></strong><small>2025.10 기준</small></div>
</div>
<div class="organization-chart" aria-label="대표이사 김칠수 아래 기술지원팀, 개발1팀, 개발2팀으로 구성">
<div class="organization-leader"><span>CEO · 대표이사</span><strong>김칠수</strong><i aria-hidden="true">✳</i></div>
<ul class="organization-teams">
<li><span class="team-index" aria-hidden="true">01</span><h4>기술지원팀</h4><p>TECHNICAL SUPPORT</p></li>
<li><span class="team-index" aria-hidden="true">02</span><h4>개발1팀</h4><p>Web 개발<br>모바일 앱 개발</p></li>
<li><span class="team-index" aria-hidden="true">03</span><h4>개발2팀</h4><p>내비게이션 개발</p></li>
</ul>
</div>
</div>
</div>
</section>
<section id="expertise" class="expertise section" aria-labelledby="expertise-title">
<div class="wrap"><div class="section-top reveal"><p class="section-label"><span>02 /</span> OUR EXPERTISE</p><span class="side-note">FIVE FIELDS. ONE CONNECTED VISION.</span></div>
<div class="expertise-layout"><div class="expertise-intro reveal"><h2 id="expertise-title">기술을 잇는<br>IT 전문가 그룹</h2><p>주식회사 트론트는 스마트 모빌리티, 산업 관제, 자산 관리, SaaS 플랫폼, <br>디지털 인터페이스 분야에서 고객의 디지털 혁신을 이끕니다.</p><div class="expertise-art" data-mode="mobility" aria-hidden="true">
<div class="expertise-art-top"><span>CAPABILITY IN FOCUS</span><span class="capability-index">01 / 05</span></div>
<div class="capability-sculpture"><i class="sculpture-plane plane-one"></i><i class="sculpture-plane plane-two"></i><i class="sculpture-plane plane-three"></i><i class="sculpture-plane plane-four"></i><div class="sculpture-core">HMI</div><span class="sculpture-point point-one"></span><span class="sculpture-point point-two"></span></div>
<div class="expertise-art-bottom"><span class="capability-name">SMART MOBILITY</span><div class="capability-dots"><i class="is-active"></i><i></i><i></i><i></i><i></i></div></div>
</div></div>
<div class="service-list reveal">
<details class="service" open><summary><span class="service-number">01</span><div><span class="tiny-label">SMART MOBILITY & HMI</span><h3>스마트 모빌리티 및 HMI 플랫폼</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>운전자와 차량 사이, 직관적인 연결을 만듭니다. 국내외 내비게이션 HMI와 차량 통신 기술을 바탕으로 새로운 이동 경험을 구현합니다.</p><div class="tags"><span>차량 통신</span><span>네비게이션 개발 연결성</span><span>관제 시스템</span></div></div></details>
<details class="service"><summary><span class="service-number">02</span><div><span class="tiny-label">INDUSTRIAL MONITORING & CONTROL</span><h3>산업 통합 관제 및 제어 시스템</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>현장의 데이터를 한눈에, 복잡한 운영을 더 명확하게. 실시간 모니터링과 데이터 송수신, 원격 제어를 통합해 산업 현장의 효율과 안전을 지원합니다.</p><div class="tags"><span>실시간 모니터링</span><span>데이터 송수신 프로토콜</span><span>시스템 통합(SI)</span><span>원격 제어 및 안전 시스템</span></div></div></details>
<details class="service"><summary><span class="service-number">03</span><div><span class="tiny-label">WEB3 & ASSET MANAGEMENT</span><h3>고도화된 Web3 & Asset 관리 솔루션</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>자산의 흐름에 정확함을, 운영에 투명함을 더합니다. 블록체인 기반 서비스와 RFID·NFC 기술을 활용해 데이터와 실물 자산을 연결합니다.</p><div class="tags"><span>블록체인 기반 투명성 확보</span><span>RFID / NFC 등 무선 통신 기반 자산 관리</span><span>금융 기술 융합</span></div></div></details>
<details class="service"><summary><span class="service-number">04</span><div><span class="tiny-label">COMMUNITY & SAAS PLATFORM</span><h3>전문 커뮤니티 및 SaaS 플랫폼</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>사람과 사람, 서비스와 일상을 연결합니다. 약국·교육·스포츠 등 도메인에 대한 이해를 바탕으로 모바일 앱, 웹, 관리자 시스템을 함께 구축합니다.</p><div class="tags"><span>도메인 특화 Web/App 서비스</span><span>GroupWare</span><span>LMS 개발</span></div></div></details>
<details class="service"><summary><span class="service-number">05</span><div><span class="tiny-label">FUTURE TECH & DIGITAL INTERFACE</span><h3>미래 기술 및 디지털 인터페이스</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>새로운 기술이 자연스러운 경험이 되도록. 가상현실 기반 웹 환경, 디지털 사이니지, 영상 분석과 UX 기술로 디지털 접점을 확장합니다.</p><div class="tags"><span>Virtual Reality기반 Web 환경</span><span>SIGNAGE</span><span>영상 분석 및 UX</span></div></div></details>
</div>
</div>
</div>
</section>
<section id="work" class="work section wrap" aria-labelledby="work-title">
<div class="section-top reveal"><p class="section-label"><span>03 /</span> SELECTED WORK</p><span class="side-note">아이디어가 현실이 되는 순간</span></div>
<div class="section-heading reveal"><h2 id="work-title">기술로 만든<br><span class="muted">실제의 변화.</span></h2><p>다양한 산업에서 증명해 온 실행력.<br>트론트가 함께 만든 프로젝트를 소개합니다.</p></div>
<div class="project-toolbar reveal"><div class="project-filters" role="group" aria-label="프로젝트 분야 필터"><button class="filter is-active" data-filter="all" aria-pressed="true">전체 <sup>08</sup></button><button class="filter" data-filter="mobility" aria-pressed="false">모빌리티</button><button class="filter" data-filter="platform" aria-pressed="false">디지털 플랫폼</button><button class="filter" data-filter="industry" aria-pressed="false">관제 & 자산 관리</button></div><span class="project-count" aria-live="polite">8 PROJECTS</span></div>
<div class="project-grid">
<!-- 01 -->
<article id="project-mobility" class="project-card reveal" data-category="mobility">
<a class="project-open" data-project="mobility" href="projects/mobility.html" aria-label="현대 오토에버 국내향 및 해외향 내비게이션 HMI 개발 포트폴리오 보기">
<div class="project-meta"><span>현대 오토에버</span><span>2018 — 2025</span></div>
<h3>국내향 및 해외향 내비게이션 HMI 개발</h3>
<div class="project-scene scene--mobility" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>NAVIGATION / HMI</span><span>01 / 08</span></div>
<div class="scene-wordmark">Navigation<br><em>HMI.</em></div><div class="scene-phrase">NAVIGATION GUI / INTERFACE LAYER</div>
<div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
<div class="scene-visual"><img src="assets/images/mobility_01.png" alt="" loading="lazy" width="1577" height="727"></div>
<div class="scene-annotation">HYUNDAI / KIA</div>
<div class="scene-bottom"><span>차량용 내비게이션</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>내비게이션 GUI 개발 · Interface layer 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- 02 -->
<article id="project-pharmacy" class="project-card reveal" data-category="platform">
<a class="project-open" data-project="pharmacy" href="projects/pharmacy.html" aria-label="모두의약국 약사님들의 커뮤니티 개발 포트폴리오 보기">
<div class="project-meta"><span>모두의약국</span><span>2022 — 2025</span></div>
<h3>약사님들의 커뮤니티 개발</h3>
<div class="project-scene scene--pharmacy" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>COMMUNITY PLATFORM</span><span>02 / 08</span></div>
<div class="scene-wordmark">모두의<br><em>약국.</em></div><div class="scene-phrase">A COMMUNITY FOR PHARMACISTS.</div>
<div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
<div class="scene-visual"><img src="assets/images/pharmacy_01.png" alt="" loading="lazy" width="702" height="1440"></div>
<div class="scene-annotation">APP / WEB / ADMIN</div>
<div class="scene-bottom"><span>모바일 앱 / 웹</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>모바일 앱 · 사용자 웹 · 백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- 03 -->
<article id="project-bems" class="project-card reveal" data-category="industry">
<a class="project-open" data-project="bems" href="projects/bems.html" aria-label="BEMS 빌딩 에너지 통합 관리 시스템 BEMS 개발 포트폴리오 보기">
<div class="project-meta"><span>BEMS</span><span>2023 — 2024</span></div>
<h3>빌딩 에너지 통합 관리 시스템 BEMS 개발</h3>
<div class="project-scene scene--bems" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>BUILDING ENERGY MANAGEMENT</span><span>03 / 08</span></div>
<div class="scene-wordmark">BEMS<span class="word-period">.</span></div><div class="scene-phrase">SENSORS / ENERGY / MONITORING</div>
<div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
<div class="scene-visual"><img src="assets/images/bems_01.png" alt="" loading="lazy" width="1199" height="534"></div>
<div class="scene-annotation">BUILDING ENERGY MANAGEMENT</div>
<div class="scene-bottom"><span>웹</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>사용자 웹 · 백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- -->
<article id="project-givon" class="project-card reveal" data-category="platform">
<a class="project-open" data-project="givon" href="projects/givon.html" aria-label="GivOn 블록체인 기반 기부 플랫폼 관리자 페이지 개발 포트폴리오 보기">
<div class="project-meta"><span>GivOn</span><span>2025</span></div>
<h3>블록체인 기반 기부 플랫폼 관리자 페이지 개발</h3>
<div class="project-scene scene--givon" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>DONATION PLATFORM / ADMIN</span><span>04 / 08</span></div>
<div class="scene-wordmark">Giv<em>On</em><span class="word-period">.</span></div><div class="scene-phrase">ORGANIZATIONS / DONATIONS / VOLUNTEERING</div>
<div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
<div class="scene-visual"><img src="assets/images/givon_01.png" alt="" loading="lazy" width="1774" height="528"></div>
<div class="scene-annotation">DONATION PLATFORM / ADMIN</div>
<div class="scene-bottom"><span>관리자 화면</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- 05 -->
<article id="project-bispet" class="project-card reveal" data-category="platform">
<a class="project-open" data-project="bispet" href="projects/bispet.html" aria-label="BISPET 애견인들 위한 커뮤니티 개발 포트폴리오 보기">
<div class="project-meta"><span>BISPET</span><span>2024 — 2025</span></div>
<h3>애견인들 위한 커뮤니티 개발</h3>
<div class="project-scene scene--bispet" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>SNS / COMMUNITY</span><span>05 / 08</span></div>
<div class="scene-wordmark">BIS<em>PET.</em></div><div class="scene-phrase">PROFILE / FEED / SCHEDULE / WALK</div>
<div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
<div class="scene-visual"><img src="assets/images/bispet_01.png" alt="" loading="lazy" width="702" height="1440"></div>
<div class="scene-annotation">MOBILE APP / ADMIN</div>
<div class="scene-bottom"><span>모바일 앱 / 관리자 화면</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>모바일 앱 · 백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- -->
<article id="project-asset" class="project-card reveal" data-category="industry">
<a class="project-open" data-project="asset" href="projects/asset.html" aria-label="WideAsset S/W RF 자산관리 솔루션 구축 포트폴리오 보기">
<div class="project-meta"><span>WideAsset S/W</span><span>2014</span></div>
<h3>RF 자산관리 솔루션 구축</h3>
<div class="project-scene scene--asset" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>RF / ASSET MANAGEMENT</span><span>06 / 08</span></div>
<div class="scene-wordmark">Wide<em>Asset.</em></div><div class="scene-phrase">RFID TAG READER / WIDEASSET S/W</div>
<div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
<div class="scene-visual"><img src="assets/images/asset_01.png" alt="" loading="lazy" width="1399" height="652"></div>
<div class="scene-annotation">IT ASSETS / OFFICE EQUIPMENT</div>
<div class="scene-bottom"><span>PDA / WideAsset S/W</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>RFID Tag Reader 인터페이스 개발 · 데이터 조회 및 업데이트 모듈 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- 07 -->
<article id="project-signage" class="project-card reveal" data-category="platform">
<a class="project-open" data-project="signage" href="projects/signage.html" aria-label="Signage 솔루션 빌딩(건물) 영상홍보 통합안내 시스템 포트폴리오 보기">
<div class="project-meta"><span>Signage 솔루션</span><span>2012</span></div>
<h3>빌딩(건물) 영상홍보 통합안내 시스템</h3>
<div class="project-scene scene--signage" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>DIGITAL SIGNAGE / NETWORK</span><span>07 / 08</span></div>
<div class="scene-wordmark">Signage<em>Network.</em></div><div class="scene-phrase">CONTENT / SCHEDULE / DISTRIBUTION</div>
<div class="scene-graphic"><svg viewBox="0 0 400 330" fill="none" aria-hidden="true" focusable="false">
<path class="signage-link" d="M100 183H170V82H222M170 183H268M170 183V270H215"/>
<circle cx="170" cy="183" r="4" fill="currentColor"/>
<rect class="signage-display" x="30" y="137" width="100" height="72" rx="5"/>
<rect class="signage-pane" x="39" y="146" width="82" height="45" rx="2"/>
<path class="signage-content" d="M66 158L85 168L66 179Z M69 218H91 M80 209V218"/>
<rect class="signage-display" x="222" y="32" width="130" height="91" rx="5"/>
<rect class="signage-pane" x="232" y="42" width="73" height="61" rx="2"/>
<path class="signage-content" d="M313 49H341M313 60H341M313 71H333M240 111H334M258 62L278 73L258 85Z"/>
<rect class="signage-display" x="268" y="151" width="65" height="108" rx="5"/>
<rect class="signage-pane" x="276" y="159" width="49" height="62" rx="2"/>
<path class="signage-content" d="M284 231H317M284 240H306"/>
<rect class="signage-display" x="215" y="278" width="127" height="30" rx="4"/>
<path class="signage-content" d="M228 293H272M281 293H330"/>
<path class="signage-link" d="M52 243H148V295H196M192 22H369V136"/>
</svg></div>
<div class="scene-annotation">ONE SYSTEM / MULTIPLE SCREENS</div>
<div class="scene-bottom"><span>MULTI-VISION / DID</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>중앙 관리 시스템 및 서버 구축 · 스케줄 및 파일 전송 로직 구현 · Infotrans Editor 및 Multi Manager 기능 구현</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
<!-- 08 -->
<article id="project-gps-building" class="project-card reveal" data-category="mobility">
<a class="project-open" data-project="gps-building" href="projects/gps-building.html" aria-label="GPS 솔루션 GPS 트래킹 기반 위치확인 시스템 개발 포트폴리오 보기">
<div class="project-meta"><span>GPS 솔루션</span><span>2010</span></div>
<h3>GPS 트래킹 기반 위치확인 시스템 개발</h3>
<div class="project-scene scene--gps-building" aria-hidden="true"><div class="scene-surface">
<div class="scene-grid"></div><div class="scene-kicker"><span>GPS / LOCATION TRACKING</span><span>08 / 08</span></div>
<div class="scene-wordmark">GPS<em>Tracking.</em></div><div class="scene-phrase">LOCATE / SAVE / NAVIGATE</div>
<div class="scene-graphic"><svg viewBox="0 0 400 360" fill="none" aria-hidden="true" focusable="false">
<path class="gps-contour" d="M30 355C-25 291 16 235 84 235S186 278 234 226S241 128 314 111S384 37 364 0 M3 331C-14 281 33 254 79 257S188 307 252 242S259 147 326 131S412 53 386 0 M56 360C0 300 32 277 79 282S200 330 272 262S278 166 340 152S425 91 402 41"/>
<circle class="gps-contour" cx="284" cy="109" r="49"/><circle class="gps-contour" cx="284" cy="109" r="71"/><circle class="gps-contour" cx="284" cy="109" r="93"/>
<path class="gps-route" d="M73 281H151Q169 281 169 263V219Q169 202 189 202H263Q284 202 284 182V117"/>
<circle class="gps-point" cx="73" cy="281" r="7"/><circle class="gps-point" cx="169" cy="227" r="5"/>
<path class="gps-pin" d="M284 117S263 96 263 81A21 21 0 0 1 305 81C305 96 284 117 284 117Z"/>
<circle class="gps-pin-center" cx="284" cy="81" r="7"/>
<path class="gps-contour" d="M333 279H357M345 267V291M79 137H95M87 129V145"/>
</svg></div>
<div class="scene-annotation">POSITION / DESTINATION / DIRECTION</div>
<div class="scene-bottom"><span>GPS / OUTDOOR TRACKER</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
</div></div>
<div class="project-scope"><p>GPS Manager · Location Manager · Navigation Manager 기반 디바이스 드라이버 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
</a>
</article>
</div>
</section>
<section id="patents" class="patents section" aria-labelledby="patents-title">
<div class="wrap">
<div class="section-top reveal"><p class="section-label"><span>04 /</span> PATENTS & R&D</p><span class="side-note">IDEAS INTO INTELLECTUAL PROPERTY</span></div>
<div class="patents-heading reveal">
<div><h2 id="patents-title">기술의 깊이를<br><span>보여주는 특허.</span></h2><p>특정 기술에 안주하지 않는 R&D 프로세스를 핵심 과정으로 삼고 있습니다.<br>미래 비즈니스 환경 변화에 선제적으로 대응하기 위해 지속적인 발굴 및 지식재산권 확보에 주력하고 있습니다.<br>특허와 인증은 당사가 미래에도 신뢰할 수 있는 파트너임을 증명하는 잠재적 능력입니다.</p></div>
<div class="patent-signature" aria-hidden="true"><span class="patent-seal"><i></i><i></i><i></i><b>✳</b></span><span>RESEARCH.<br>DEVELOPMENT.<br>INNOVATION.</span></div>
</div>
<div class="patent-grid">
<article class="patent-card reveal">
<a class="patent-document" href="assets/images/patent-virtual-image.png" target="_blank" rel="noopener" aria-label="객체 가상 이미지 구현 방법 특허증 크게 보기, 새 탭">
<span class="patent-document-label" aria-hidden="true">PATENT / 01</span>
<img src="assets/images/patent-virtual-image.png" alt="객체 가상 이미지 구현 방법 특허증, 제10-0951362호" loading="lazy" width="960" height="1396">
<span class="patent-document-action">특허증 크게 보기 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></span>
</a>
<div class="patent-information">
<p class="patent-kicker"><span>01</span> VIRTUAL IMAGE</p>
<h3>객체 가상 이미지 <span class="patent-title-line">구현 방법</span></h3>
<p class="patent-description">실제 객체를 기반으로 가상 이미지를 생성하고, 현실과 통합하는 기술입니다.</p>
<dl class="patent-data"><div><dt>특허번호</dt><dd>제10-0951362호</dd></div><div><dt>출원일</dt><dd><time datetime="2008-07-04">2008.07.04</time></dd></div><div><dt>등록일</dt><dd><time datetime="2010-03-30">2010.03.30</time></dd></div></dl>
</div>
</article>
<article class="patent-card reveal">
<a class="patent-document" href="assets/images/patent-liquid-dispenser.png" target="_blank" rel="noopener" aria-label="액체 세제 자동 판매 장치 특허증 크게 보기, 새 탭">
<span class="patent-document-label" aria-hidden="true">PATENT / 02</span>
<img src="assets/images/patent-liquid-dispenser.png" alt="액체 세제 자동 판매 장치 특허증, 제10-1099507호" loading="lazy" width="960" height="1424">
<span class="patent-document-action">특허증 크게 보기 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></span>
</a>
<div class="patent-information">
<p class="patent-kicker"><span>02</span> DEVICE CONTROL</p>
<h3>액체 세제 <span class="patent-title-line">자동 판매 장치</span></h3>
<p class="patent-description">액체 세제의 자동 판매 및 관리를 위한 기술로 효율적인 자판기 시스템 제어에 대한 특허.</p>
<dl class="patent-data"><div><dt>특허번호</dt><dd>제10-1099507호</dd></div><div><dt>출원일</dt><dd><time datetime="2010-07-28">2010.07.28</time></dd></div><div><dt>등록일</dt><dd><time datetime="2011-12-21">2011.12.21</time></dd></div></dl>
</div>
</article>
</div>
</div>
</section>
<section id="journey" class="journey section" aria-labelledby="journey-title">
<div class="wrap">
<div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">TECHNOLOGY & EXPERIENCE</span></div>
<div class="journey-heading reveal"><h2 id="journey-title">프로젝트로 쌓아온<br>기술과 경험.</h2><p>서버·업무 시스템부터 내비게이션 HMI,<br>모바일·웹 플랫폼과 관제까지.</p></div>
<div class="timeline-tabs reveal" role="tablist" aria-label="트론트 연도별 개발 역량">
<button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel-2008" tabindex="-1" data-year="2008">2008<span>서버·업무 시스템</span></button>
<button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel-2012" tabindex="-1" data-year="2012">2012<span>사이니지·자산 관리</span></button>
<button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel-2018" tabindex="-1" data-year="2018">2018<span>내비게이션 HMI</span></button>
<button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel-2022" tabindex="-1" data-year="2022">2022<span>앱·웹·통합 관제</span></button>
<button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel-2025" tabindex="0" data-year="2025">2025<span>블록체인·관제</span></button>
</div>
<!-- 연도별 제목과 설명을 아래 HTML에서 수정합니다. -->
<div id="timeline-panel-2008" class="timeline-panel" role="tabpanel" aria-labelledby="year-2008" tabindex="0" hidden>
<span class="timeline-year" aria-hidden="true">2008</span>
<div class="timeline-detail">
<h3>서버와 업무 시스템 개발의 시작</h3>
<p class="timeline-description">2008년 12월 1일 설립 이후, 도메인 연결을 위한 DDNS 서버와 기업의 협업을 지원하는 그룹웨어, 원격강의 지원 시스템(LMS)을 개발했습니다. <strong>차량용 미들웨어</strong> 개발에도 참여하며 서버와 차량 소프트웨어 분야의 경험을 쌓았습니다.</p>
</div>
</div>
<div id="timeline-panel-2012" class="timeline-panel" role="tabpanel" aria-labelledby="year-2012" tabindex="0" hidden>
<span class="timeline-year" aria-hidden="true">2012</span>
<div class="timeline-detail">
<h3>영상 안내부터 자산 관리까지</h3>
<p class="timeline-description">건물 내 여러 화면에 콘텐츠를 배포하는 <strong>디지털 사이니지</strong>와 <strong>NFC·RFID 기반 자산 관리</strong> 솔루션을 개발했습니다. 청라 U-CITY 환경 서비스에도 참여하며 현장의 정보를 연결하는 시스템을 구현했습니다.</p>
</div>
</div>
<div id="timeline-panel-2018" class="timeline-panel" role="tabpanel" aria-labelledby="year-2018" tabindex="0" hidden>
<span class="timeline-year" aria-hidden="true">2018</span>
<div class="timeline-detail">
<h3>현대오토에버 국내외 내비게이션 HMI 개발</h3>
<p class="timeline-description">운전자와 차량 시스템을 연결하는 내비게이션 화면과 인터페이스를 개발했습니다. <strong>C++·Qt 기반 GUI</strong> 구현을 통해 국내외 시장을 위한 차량용 소프트웨어 개발에 참여했습니다.</p>
</div>
</div>
<div id="timeline-panel-2022" class="timeline-panel" role="tabpanel" aria-labelledby="year-2022" tabindex="0" hidden>
<span class="timeline-year" aria-hidden="true">2022</span>
<div class="timeline-detail">
<h3>커뮤니티 플랫폼과 건물 에너지 관제 개발</h3>
<p class="timeline-description">약사의 구인·구직과 약국 매물, 약 정보를 나누는 <strong>모두의약국</strong>의 모바일 앱·웹·백엔드를 개발했습니다. 반려동물의 일상과 산책 활동을 기록하는 SNS 앱 <strong>BISPET</strong>, 건물의 온·습도와 공조기 가동 정보, 사용 전력을 관리하는 <strong>빌딩 에너지 관리 시스템(BEMS)</strong>도 구현했습니다.</p>
</div>
</div>
<div id="timeline-panel-2025" class="timeline-panel" role="tabpanel" aria-labelledby="year-2025" tabindex="0">
<span class="timeline-year" aria-hidden="true">2025</span>
<div class="timeline-detail">
<h3>기부 플랫폼과 기관차 관제 개발</h3>
<p class="timeline-description">블록체인 기반 기부 플랫폼 <strong>GivOn</strong>의 관리자 시스템을 개발했습니다. 소규모 기관차 관제 프로그램 개발에도 참여하며 플랫폼 운영과 산업 현장에 필요한 소프트웨어를 구현했습니다.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact contact-form-section section" aria-labelledby="contact-title">
<div class="wrap">
<div class="section-top reveal"><p class="section-label"><span>06 /</span> LET'S CONNECT</p></div>
<div class="contact-form-layout">
<div class="contact-form-intro reveal">
<h2 id="contact-title">어떤 프로젝트를<br><em>생각하고 계신가요?</em></h2>
<p>아직 구체적이지 않아도 괜찮습니다.<br> 만들고 싶은 서비스와 해결하고 싶은 문제를 들려주세요.<br> 아이디어의 다음 단계를 함께 고민하겠습니다.</p>
<div class="contact-form-topics" aria-label="문의 주제"><span>프로젝트 의뢰</span><span>기술 상담</span><span>파트너십</span></div>
<div class="contact-form-art" aria-hidden="true"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></div>
<div class="contact-form-caption" aria-hidden="true">YOUR IDEA. OUR NEXT CHAPTER.</div>
</div>
<form class="inquiry-form reveal" aria-labelledby="inquiry-title">
<div class="inquiry-heading"><h3 id="inquiry-title">프로젝트 문의</h3><p><span class="inquiry-required">*</span> 필수 입력</p></div>
<div class="inquiry-fields">
<div class="inquiry-field"><label for="inquiry-name">이름 <span class="inquiry-required">*</span></label><input id="inquiry-name" name="name" type="text" autocomplete="name" placeholder="성함을 입력해 주세요" maxlength="80" required></div>
<div class="inquiry-field"><label for="inquiry-company">회사명 <span>선택</span></label><input id="inquiry-company" name="company" type="text" autocomplete="organization" placeholder="회사 또는 팀 이름" maxlength="120"></div>
<div class="inquiry-field"><label for="inquiry-email">이메일 <span class="inquiry-required">*</span></label><input id="inquiry-email" name="email" type="email" autocomplete="email" placeholder="name@company.com" maxlength="254" required></div>
<div class="inquiry-field"><label for="inquiry-phone">연락처 <span>선택</span></label><input id="inquiry-phone" name="phone" type="tel" autocomplete="tel" placeholder="010-0000-0000" maxlength="40"></div>
<div class="inquiry-field inquiry-field--wide"><label for="inquiry-message">문의내용 <span class="inquiry-required">*</span></label><textarea id="inquiry-message" name="message" rows="4" placeholder="프로젝트 소개, 필요한 기능, 예상 일정 등을 자유롭게 남겨주세요." maxlength="2000" aria-describedby="inquiry-counter" required></textarea><p id="inquiry-counter" class="inquiry-counter"><span data-message-count>0</span> / 2,000</p></div>
<div class="inquiry-field inquiry-field--wide">
<label for="inquiry-attachments" class="inquiry-attachment-label">파일첨부 <span>선택</span></label>
<div class="inquiry-upload">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 10 4-4 4 4M12 6v10M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4"/></svg>
<div><strong>파일을 선택하거나 여기에 놓아주세요</strong><small id="inquiry-file-help">소개서, 기획안 등 · 최대 5개, 총 20MB</small></div>
<input id="inquiry-attachments" name="attachments" type="file" multiple aria-describedby="inquiry-file-help inquiry-upload-status">
</div>
<ul class="inquiry-files" aria-label="선택한 첨부파일"></ul>
<p id="inquiry-upload-status" class="inquiry-upload-status" role="status" aria-live="polite"></p>
</div>
</div>
<button class="inquiry-submit" type="submit" disabled>문의 보내기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></button>
<noscript><p class="inquiry-noscript-note">문의 폼을 사용하려면 JavaScript를 활성화해 주세요.</p></noscript>
</form>
</div>
</div>
</section>
</main>
<footer class="site-footer"><div class="wrap"><div class="footer-top"><a class="footer-name" href="#home" aria-label="트론트 홈">TRONT<span class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a><p>THE ROAD NOT TAKEN.<br>THE FUTURE WE CREATE.</p><a class="back-top" href="#home" aria-label="맨 위로"><svg class="arrow-icon arrow-icon--up" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a></div><div class="footer-bottom"><span>주식회사 트론트 <span class="footer-divider">|</span> 대표이사 김칠수</span><span>© <span id="copyright-year">2026</span> TRONT. All rights reserved.</span><a href="docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf" download="TRONT_회사소개서.pdf">회사소개서 다운로드 <svg class="arrow-icon arrow-icon--down-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a></div></div></footer>
<dialog id="inquiry-success-dialog" class="inquiry-dialog" aria-labelledby="inquiry-success-title" aria-describedby="inquiry-success-description">
<button type="button" class="inquiry-dialog-close" data-close-inquiry aria-label="전송 완료 안내 닫기"><span aria-hidden="true">×</span></button>
<div class="inquiry-success-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m8 16 5 5L24 10"/></svg></div>
<p class="inquiry-success-label">THANK YOU FOR REACHING OUT</p>
<h2 id="inquiry-success-title">문의가 전송되었습니다.</h2>
<p id="inquiry-success-description">트론트에 관심을 가져주셔서 감사합니다.<br>남겨주신 내용을 확인한 후 연락드리겠습니다.</p>
<button type="button" class="inquiry-dialog-confirm" data-close-inquiry autofocus>확인</button>
</dialog>
<dialog id="map-dialog" class="map-dialog" aria-labelledby="map-dialog-title" aria-describedby="map-dialog-address">
<header class="map-dialog-header">
<div><p class="tiny-label">COME FIND US</p><h2 id="map-dialog-title">트론트 오시는 길</h2></div>
<button type="button" class="map-dialog-close" aria-label="지도 닫기" autofocus><span aria-hidden="true">×</span> 닫기</button>
</header>
<div class="map-dialog-body" aria-busy="true">
<div class="map-dialog-canvas"></div>
<div class="map-dialog-status" role="status"><p>지도를 불러오는 중입니다.</p><button type="button" class="map-dialog-retry" hidden>다시 불러오기</button></div>
</div>
<footer class="map-dialog-footer"><address id="map-dialog-address">대구광역시 북구 경대로17길 47<br><strong>IT융합산업빌딩 1203호</strong></address><span class="map-dialog-hint">바깥 영역을 누르면 닫힙니다.</span></footer>
</dialog>
</body>
</html>