트론트 홈페이지와 포트폴리오 초기 구성
This commit is contained in:
51
projects/asset.html
Normal file
51
projects/asset.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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="국내향 RF 기반 IT 자산 및 사무기기 관리 솔루션 개발">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="WideAsset S/W — RF 자산관리 솔루션 구축 | TRONT"><meta property="og:description" content="국내향 RF 기반 IT 자산 및 사무기기 관리 솔루션 개발">
|
||||
<title>WideAsset S/W — RF 자산관리 솔루션 구축 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--asset">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-asset" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 06 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">WideAsset S/W</p><h1 class="case-enter">RF 자산관리 솔루션 구축</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2014.01 — 2014.12</dd></div><div><dt>OUR ROLE</dt><dd>RFID Tag Reader 인터페이스 개발 · 데이터 조회 및 업데이트 모듈 개발</dd></div><div><dt>PLATFORM</dt><dd>PDA / WideAsset S/W</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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="eager" 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">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>WideAsset S/W</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">시스템 구성</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">IT 자산과 사무기기를<br>RF로 연결하다.</h2>
|
||||
<div class="case-reveal"><p>국내향 RF 기반 IT 자산 및 사무기기 관리 솔루션 개발</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>국내 IT 자산과 사무기기를 관리하기 위한 RF 기반 솔루션입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>RFID Tag Reader와 PDA, WideAsset S/W를 연동해 자산 데이터를 조회하고 업데이트합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>C#과 C++를 사용하고 DB를 연동해 RF 기반 자산관리 솔루션을 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>시스템 구성</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>자산과 장비의 연결을<br>시스템 구성도로 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="WideAsset S/W 시스템 구성"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>시스템 구성</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas"><img src="../assets/images/asset_01.png" alt="RFID Tag Reader, PDA, WideAsset S/W와 서버를 연결하는 시스템 구성도입니다." loading="lazy" width="1399" height="652"></div><figcaption><span>01 / 01</span><p>RFID Tag Reader, PDA, WideAsset S/W와 서버를 연결하는 시스템 구성도입니다.</p><a href="../assets/images/asset_01.png" target="_blank" rel="noopener" aria-label="시스템 구성 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="signage.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>Signage 솔루션</h2><p>빌딩(건물) 영상홍보 통합안내 시스템</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
53
projects/bems.html
Normal file
53
projects/bems.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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="빌딩 내 온/습도 센서, 공조기 가동 센서 및 사용 전력 관리를 전력 관리 관제 프로그램 개발">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="BEMS — 빌딩 에너지 통합 관리 시스템 BEMS 개발 | TRONT"><meta property="og:description" content="빌딩 내 온/습도 센서, 공조기 가동 센서 및 사용 전력 관리를 전력 관리 관제 프로그램 개발">
|
||||
<title>BEMS — 빌딩 에너지 통합 관리 시스템 BEMS 개발 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--bems">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-bems" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 03 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">BEMS</p><h1 class="case-enter">빌딩 에너지 통합 관리 시스템 BEMS 개발</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2023.03.01 — 2024.02.28</dd></div><div><dt>OUR ROLE</dt><dd>사용자 웹 · 백엔드 개발 · 관리자 화면 개발</dd></div><div><dt>PLATFORM</dt><dd>웹</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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="eager" width="1199" height="534"></div>
|
||||
<div class="scene-annotation">BUILDING ENERGY MANAGEMENT</div>
|
||||
<div class="scene-bottom"><span>웹</span><span class="scene-view">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>BEMS</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">건물의 센서와 전력을<br>하나의 관제 화면에서.</h2>
|
||||
<div class="case-reveal"><p>빌딩 내 온/습도 센서, 공조기 가동 센서 및 사용 전력 관리를 전력 관리 관제 프로그램 개발</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>빌딩 내 온·습도 센서, 공조기 가동 센서와 사용 전력을 관리하는 관제 프로그램입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>온·습도와 공조기 가동 정보를 확인하고, 건물의 사용 전력을 관리합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>Vue.js로 사용자 웹을 개발하고, Spring Boot로 백엔드와 관리자 화면을 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>실제 개발 화면</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>서비스의 기능과 흐름을<br>실제 개발 화면으로 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="BEMS 개발 화면"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>표준 대시보드</button><button id="screen-tab-1" role="tab" aria-selected="false" aria-controls="screen-1" tabindex="-1" data-screen="1"><span>02</span>센서 정보</button><button id="screen-tab-2" role="tab" aria-selected="false" aria-controls="screen-2" tabindex="-1" data-screen="2"><span>03</span>EV 충전</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas"><img src="../assets/images/bems_01.png" alt="BEMS 표준 대시보드 화면입니다." loading="lazy" width="1199" height="534"></div><figcaption><span>01 / 03</span><p>BEMS 표준 대시보드 화면입니다.</p><a href="../assets/images/bems_01.png" target="_blank" rel="noopener" aria-label="표준 대시보드 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-1" role="tabpanel" aria-labelledby="screen-tab-1" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/bems_02.png" alt="BEMS 센서정보 화면입니다." loading="lazy" width="1200" height="590"></div><figcaption><span>02 / 03</span><p>BEMS 센서정보 화면입니다.</p><a href="../assets/images/bems_02.png" target="_blank" rel="noopener" aria-label="센서 정보 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-2" role="tabpanel" aria-labelledby="screen-tab-2" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/bems_03.png" alt="BEMS EV 충전 화면입니다." loading="lazy" width="1199" height="576"></div><figcaption><span>03 / 03</span><p>BEMS EV 충전 화면입니다.</p><a href="../assets/images/bems_03.png" target="_blank" rel="noopener" aria-label="EV 충전 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="givon.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>GivOn</h2><p>블록체인 기반 기부 플랫폼 관리자 페이지 개발</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
52
projects/bispet.html
Normal file
52
projects/bispet.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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="반려 동물의 정보 관리 및 반려동물과 생활 기록(피드 작성, 일정, 산책 활동) 기록한 SNS 앱 개발">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="BISPET — 애견인들 위한 커뮤니티 개발 | TRONT"><meta property="og:description" content="반려 동물의 정보 관리 및 반려동물과 생활 기록(피드 작성, 일정, 산책 활동) 기록한 SNS 앱 개발">
|
||||
<title>BISPET — 애견인들 위한 커뮤니티 개발 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--bispet">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-bispet" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 05 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">BISPET</p><h1 class="case-enter">애견인들 위한 커뮤니티 개발</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2024.07.01 — 2025.03.31</dd></div><div><dt>OUR ROLE</dt><dd>모바일 앱 · 백엔드 개발 · 관리자 화면 개발</dd></div><div><dt>PLATFORM</dt><dd>모바일 앱 / 관리자 화면</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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="eager" width="702" height="1440"></div>
|
||||
<div class="scene-annotation">MOBILE APP / ADMIN</div>
|
||||
<div class="scene-bottom"><span>모바일 앱 / 관리자 화면</span><span class="scene-view">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>BISPET</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">반려동물과의 일상을<br>기록하고 나누다.</h2>
|
||||
<div class="case-reveal"><p>반려 동물의 정보 관리 및 반려동물과 생활 기록(피드 작성, 일정, 산책 활동) 기록한 SNS 앱 개발</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>반려동물과 생활하는 애견인을 위한 SNS 앱입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>반려동물 정보를 관리하고, 피드 작성과 일정, 산책 활동을 통해 함께하는 생활을 기록합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>Flutter로 모바일 앱을 개발하고, Spring Boot로 백엔드와 관리자 화면을 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>실제 개발 화면</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>서비스의 기능과 흐름을<br>실제 개발 화면으로 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="BISPET 개발 화면"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>앱 메인</button><button id="screen-tab-1" role="tab" aria-selected="false" aria-controls="screen-1" tabindex="-1" data-screen="1"><span>02</span>관리자 대시보드</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas screen-portrait"><img src="../assets/images/bispet_01.png" alt="BISPET 앱 메인 화면입니다." loading="lazy" width="702" height="1440"></div><figcaption><span>01 / 02</span><p>BISPET 앱 메인 화면입니다.</p><a href="../assets/images/bispet_01.png" target="_blank" rel="noopener" aria-label="앱 메인 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-1" role="tabpanel" aria-labelledby="screen-tab-1" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/bispet_02.png" alt="BISPET 관리자 대시보드 화면입니다." loading="lazy" width="1448" height="800"></div><figcaption><span>02 / 02</span><p>BISPET 관리자 대시보드 화면입니다.</p><a href="../assets/images/bispet_02.png" target="_blank" rel="noopener" aria-label="관리자 대시보드 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="asset.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>WideAsset S/W</h2><p>RF 자산관리 솔루션 구축</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
53
projects/givon.html
Normal file
53
projects/givon.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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="기부를 위한 단체 관리, 기부/봉사 프로젝트 생성 및 기부 현황를 관리를 위한 관리자 화면 개발">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="GivOn — 블록체인 기반 기부 플랫폼 관리자 페이지 개발 | TRONT"><meta property="og:description" content="기부를 위한 단체 관리, 기부/봉사 프로젝트 생성 및 기부 현황를 관리를 위한 관리자 화면 개발">
|
||||
<title>GivOn — 블록체인 기반 기부 플랫폼 관리자 페이지 개발 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--givon">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-givon" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 04 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">GivOn</p><h1 class="case-enter">블록체인 기반 기부 플랫폼 관리자 페이지 개발</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2025.08.01 — 2025.10.31</dd></div><div><dt>OUR ROLE</dt><dd>백엔드 개발 · 관리자 화면 개발</dd></div><div><dt>PLATFORM</dt><dd>관리자 화면</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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="eager" width="1774" height="528"></div>
|
||||
<div class="scene-annotation">DONATION PLATFORM / ADMIN</div>
|
||||
<div class="scene-bottom"><span>관리자 화면</span><span class="scene-view">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>GivOn</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">기부와 봉사의 운영을<br>관리자 화면에 담다.</h2>
|
||||
<div class="case-reveal"><p>기부를 위한 단체 관리, 기부/봉사 프로젝트 생성 및 기부 현황를 관리를 위한 관리자 화면 개발</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>블록체인 기반 기부 플랫폼 GivOn을 운영하기 위한 관리자 화면입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>기부 단체를 관리하고, 기부·봉사 프로젝트를 생성하며 기부 현황을 확인합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>Spring Boot로 백엔드를 개발하고, Vue.js로 관리자 화면을 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>실제 개발 화면</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>서비스의 기능과 흐름을<br>실제 개발 화면으로 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="GivOn 개발 화면"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>기부 프로젝트</button><button id="screen-tab-1" role="tab" aria-selected="false" aria-controls="screen-1" tabindex="-1" data-screen="1"><span>02</span>단체 관리</button><button id="screen-tab-2" role="tab" aria-selected="false" aria-controls="screen-2" tabindex="-1" data-screen="2"><span>03</span>봉사 프로젝트</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas"><img src="../assets/images/givon_01.png" alt="기부 프로젝트 상세 화면입니다." loading="lazy" width="1774" height="528"></div><figcaption><span>01 / 03</span><p>기부 프로젝트 상세 화면입니다.</p><a href="../assets/images/givon_01.png" target="_blank" rel="noopener" aria-label="기부 프로젝트 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-1" role="tabpanel" aria-labelledby="screen-tab-1" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/givon_02.png" alt="기부 단체 관리 화면입니다." loading="lazy" width="1774" height="528"></div><figcaption><span>02 / 03</span><p>기부 단체 관리 화면입니다.</p><a href="../assets/images/givon_02.png" target="_blank" rel="noopener" aria-label="단체 관리 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-2" role="tabpanel" aria-labelledby="screen-tab-2" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/givon_03.png" alt="봉사 프로젝트 상세 화면입니다." loading="lazy" width="1774" height="528"></div><figcaption><span>03 / 03</span><p>봉사 프로젝트 상세 화면입니다.</p><a href="../assets/images/givon_03.png" target="_blank" rel="noopener" aria-label="봉사 프로젝트 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="bispet.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>BISPET</h2><p>애견인들 위한 커뮤니티 개발</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
58
projects/gps-building.html
Normal file
58
projects/gps-building.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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="GPS 트래킹 방식을 활용, 옥외 위치 추적기를 개발하고 사용자의 현재 위치 확인, 목적지 설정, 이동 방향 추적등 기능을 수행할 수 있도록 시스템 구축">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="GPS 솔루션 — GPS 트래킹 기반 위치확인 시스템 개발 | TRONT"><meta property="og:description" content="GPS 트래킹 방식을 활용, 옥외 위치 추적기를 개발하고 사용자의 현재 위치 확인, 목적지 설정, 이동 방향 추적등 기능을 수행할 수 있도록 시스템 구축">
|
||||
<title>GPS 솔루션 — GPS 트래킹 기반 위치확인 시스템 개발 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--gps-building">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-gps-building" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 08 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">GPS 솔루션</p><h1 class="case-enter">GPS 트래킹 기반 위치확인 시스템 개발</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2010.03 — 2010.11</dd></div><div><dt>OUR ROLE</dt><dd>GPS Manager · Location Manager · Navigation Manager 기반 디바이스 드라이버 개발</dd></div><div><dt>PLATFORM</dt><dd>옥외 위치 추적기 / 사용자 애플리케이션</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>GPS 솔루션</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">시스템 구성</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">현재 위치에서<br>다음 목적지까지.</h2>
|
||||
<div class="case-reveal"><p>GPS 트래킹 방식을 활용, 옥외 위치 추적기를 개발하고 사용자의 현재 위치 확인, 목적지 설정, 이동 방향 추적등 기능을 수행할 수 있도록 시스템 구축</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>야외 활동, 주차, 여행 등 옥외 환경에서 현재 위치와 목적지를 확인하는 사용자를 위한 위치 추적 시스템입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>현재 위치를 수신·저장하고 목적지 정보를 설정합니다. 저장한 위치를 바탕으로 이동 방향을 추적하고 표시합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>GPS 기본 칩셋과 MCU를 활용하고, GPS Manager·Location Manager·Navigation Manager 기반 디바이스 드라이버로 하드웨어와 사용자 애플리케이션을 연동했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>시스템 구성</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>위치 수신부터 이동 방향 안내까지,<br>시스템의 동작 구조를 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="GPS 솔루션 시스템 구성"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>시스템 구성</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas"><img src="../assets/images/gps-building_01.png" alt="GPS 인공위성과 옥외 위치 추적기를 연결해 현재 위치를 수신·저장하고, 목적지 정보 및 이동 방향을 표시하는 시스템 구성도입니다." loading="lazy" width="3499" height="1875"></div><figcaption><span>01 / 01</span><p>GPS 인공위성과 옥외 위치 추적기를 연결해 현재 위치를 수신·저장하고, 목적지 정보 및 이동 방향을 표시하는 시스템 구성도입니다.</p><a href="../assets/images/gps-building_01.png" target="_blank" rel="noopener" aria-label="시스템 구성 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="mobility.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>현대 오토에버</h2><p>국내향 및 해외향 내비게이션 HMI 개발</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
81
projects/mobility.html
Normal file
81
projects/mobility.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!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="현대, 기아 자동차 국내향 및 해외향(북미, 유럽, 남미, 중동, 호주) HMI 외주 개발 및 Engine App 개발">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="현대 오토에버 — 국내향 및 해외향 내비게이션 HMI 개발 | TRONT"><meta property="og:description" content="현대, 기아 자동차 국내향 및 해외향(북미, 유럽, 남미, 중동, 호주) HMI 외주 개발 및 Engine App 개발">
|
||||
<title>현대 오토에버 — 국내향 및 해외향 내비게이션 HMI 개발 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--mobility">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-mobility" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 01 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">현대 오토에버</p><h1 class="case-enter">국내향 및 해외향 내비게이션 HMI 개발</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2018.05.01 — 2025.03.31</dd></div><div><dt>OUR ROLE</dt><dd>내비게이션 GUI 개발 · Interface layer 개발</dd></div><div><dt>PLATFORM</dt><dd>차량용 내비게이션</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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="eager" width="1577" height="727"></div>
|
||||
<div class="scene-annotation">HYUNDAI / KIA</div>
|
||||
<div class="scene-bottom"><span>차량용 내비게이션</span><span class="scene-view">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>현대 오토에버</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">운전자와 차량을 잇는<br>내비게이션 인터페이스.</h2>
|
||||
<div class="case-reveal"><p>현대, 기아 자동차 국내향 및 해외향(북미, 유럽, 남미, 중동, 호주) HMI 외주 개발 및 Engine App 개발</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>현대·기아 자동차의 국내향과 북미·유럽·남미·중동·호주향 차량용 내비게이션을 대상으로 한 프로젝트입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>내비게이션 GUI와 Interface layer, Engine App을 개발했습니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>C++와 Qt로 내비게이션 GUI를 개발하고, C++로 Interface layer를 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section">
|
||||
<div class="wrap">
|
||||
<div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>실제 개발 화면</span></div>
|
||||
<div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>서비스의 기능과 흐름을<br>실제 개발 화면으로 살펴보세요.</p></div>
|
||||
<div class="screen-tabs case-reveal" role="tablist" aria-label="현대 오토에버 개발 화면">
|
||||
<button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>차량 내 HMI</button>
|
||||
<button id="screen-tab-1" role="tab" aria-selected="false" aria-controls="screen-1" tabindex="-1" data-screen="1"><span>02</span>내비게이션 설정</button>
|
||||
<button id="screen-tab-2" role="tab" aria-selected="false" aria-controls="screen-2" tabindex="-1" data-screen="2"><span>03</span>지도 인터페이스</button>
|
||||
<button id="screen-tab-3" role="tab" aria-selected="false" aria-controls="screen-3" tabindex="-1" data-screen="3"><span>04</span>경치 좋은 길</button>
|
||||
</div>
|
||||
<div class="screen-gallery case-reveal">
|
||||
<figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0">
|
||||
<div class="screen-canvas"><img src="../assets/images/mobility_01.png" alt="차량에 적용된 내비게이션 HMI 화면입니다." loading="lazy" width="1577" height="727"></div>
|
||||
<figcaption><span>01 / 04</span><p>차량에 적용된 내비게이션 HMI 화면입니다.</p><a href="../assets/images/mobility_01.png" target="_blank" rel="noopener" aria-label="차량 내 HMI 전체 화면으로 보기">크게 보기 ⤢</a></figcaption>
|
||||
</figure>
|
||||
<figure class="case-screen" id="screen-1" role="tabpanel" aria-labelledby="screen-tab-1" tabindex="0" hidden>
|
||||
<div class="screen-canvas"><img src="../assets/images/mobility_02.png" alt="내비게이션 설정 화면입니다." loading="lazy" width="1332" height="499"></div>
|
||||
<figcaption><span>02 / 04</span><p>내비게이션 설정 화면입니다.</p><a href="../assets/images/mobility_02.png" target="_blank" rel="noopener" aria-label="내비게이션 설정 전체 화면으로 보기">크게 보기 ⤢</a></figcaption>
|
||||
</figure>
|
||||
<figure class="case-screen" id="screen-2" role="tabpanel" aria-labelledby="screen-tab-2" tabindex="0" hidden>
|
||||
<div class="screen-canvas"><img src="../assets/images/mobility_03.png" alt="차량 내비게이션의 지도 화면입니다." loading="lazy" width="1399" height="633"></div>
|
||||
<figcaption><span>03 / 04</span><p>차량 내비게이션의 지도 화면입니다.</p><a href="../assets/images/mobility_03.png" target="_blank" rel="noopener" aria-label="지도 인터페이스 전체 화면으로 보기">크게 보기 ⤢</a></figcaption>
|
||||
</figure>
|
||||
<figure class="case-screen" id="screen-3" role="tabpanel" aria-labelledby="screen-tab-3" tabindex="0" hidden>
|
||||
<div class="screen-canvas"><img src="../assets/images/mobility_04.png" alt="경치 좋은 길 탐색 화면입니다." loading="lazy" width="1332" height="499"></div>
|
||||
<figcaption><span>04 / 04</span><p>경치 좋은 길 탐색 화면입니다.</p><a href="../assets/images/mobility_04.png" target="_blank" rel="noopener" aria-label="경치 좋은 길 전체 화면으로 보기">크게 보기 ⤢</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<p class="case-source-note">프로젝트 화면 자료입니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="case-next"><a href="pharmacy.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>모두의약국</h2><p>약사님들의 커뮤니티 개발</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
53
projects/pharmacy.html
Normal file
53
projects/pharmacy.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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="약사님들을 위한 구인/구직, 약국 매물, 약 정보, 커뮤니티를 제공하는 모바일 앱, 웹, 관리자 개발">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="모두의약국 — 약사님들의 커뮤니티 개발 | TRONT"><meta property="og:description" content="약사님들을 위한 구인/구직, 약국 매물, 약 정보, 커뮤니티를 제공하는 모바일 앱, 웹, 관리자 개발">
|
||||
<title>모두의약국 — 약사님들의 커뮤니티 개발 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--pharmacy">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-pharmacy" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 02 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">모두의약국</p><h1 class="case-enter">약사님들의 커뮤니티 개발</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2022.09.01 — 2025.03.31</dd></div><div><dt>OUR ROLE</dt><dd>모바일 앱 · 사용자 웹 · 백엔드 개발 · 관리자 화면 개발</dd></div><div><dt>PLATFORM</dt><dd>모바일 앱 / 웹</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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="eager" width="702" height="1440"></div>
|
||||
<div class="scene-annotation">APP / WEB / ADMIN</div>
|
||||
<div class="scene-bottom"><span>모바일 앱 / 웹</span><span class="scene-view">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>모두의약국</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">약사의 일에 필요한 정보를<br>하나의 커뮤니티로.</h2>
|
||||
<div class="case-reveal"><p>약사님들을 위한 구인/구직, 약국 매물, 약 정보, 커뮤니티를 제공하는 모바일 앱, 웹, 관리자 개발</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>약사를 위한 정보와 커뮤니티를 모바일 앱과 웹으로 제공하는 서비스입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>구인·구직, 약국 매물, 약 정보와 커뮤니티 기능을 제공합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>Flutter로 모바일 앱을, Vue.js로 사용자 웹을 개발하고, Spring Boot로 백엔드와 관리자 화면을 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>실제 개발 화면</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>서비스의 기능과 흐름을<br>실제 개발 화면으로 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="모두의약국 개발 화면"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>앱 메인</button><button id="screen-tab-1" role="tab" aria-selected="false" aria-controls="screen-1" tabindex="-1" data-screen="1"><span>02</span>웹 메인</button><button id="screen-tab-2" role="tab" aria-selected="false" aria-controls="screen-2" tabindex="-1" data-screen="2"><span>03</span>관리자 대시보드</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas screen-portrait"><img src="../assets/images/pharmacy_01.png" alt="모두의약국 앱 메인 화면입니다." loading="lazy" width="702" height="1440"></div><figcaption><span>01 / 03</span><p>모두의약국 앱 메인 화면입니다.</p><a href="../assets/images/pharmacy_01.png" target="_blank" rel="noopener" aria-label="앱 메인 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-1" role="tabpanel" aria-labelledby="screen-tab-1" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/pharmacy_02.png" alt="모두의약국 웹 메인 화면입니다." loading="lazy" width="1200" height="538"></div><figcaption><span>02 / 03</span><p>모두의약국 웹 메인 화면입니다.</p><a href="../assets/images/pharmacy_02.png" target="_blank" rel="noopener" aria-label="웹 메인 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure>
|
||||
<figure class="case-screen" id="screen-2" role="tabpanel" aria-labelledby="screen-tab-2" tabindex="0" hidden><div class="screen-canvas"><img src="../assets/images/pharmacy_03.png" alt="모두의약국 관리자 대시보드 화면입니다." loading="lazy" width="1399" height="602"></div><figcaption><span>03 / 03</span><p>모두의약국 관리자 대시보드 화면입니다.</p><a href="../assets/images/pharmacy_03.png" target="_blank" rel="noopener" aria-label="관리자 대시보드 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="bems.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>BEMS</h2><p>빌딩 에너지 통합 관리 시스템 BEMS 개발</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
65
projects/signage.html
Normal file
65
projects/signage.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!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="빌딩(건물) 내 멀티비전 및 DID(Digital Information Display) TV 스크린을 활용, 영상 홍보 및 통합 안내 콘텐츠를 중앙에서 관리/분산 송출 하는 시스템 구축">
|
||||
<meta property="og:type" content="website"><meta property="og:title" content="Signage 솔루션 — 빌딩(건물) 영상홍보 통합안내 시스템 | TRONT"><meta property="og:description" content="빌딩(건물) 내 멀티비전 및 DID(Digital Information Display) TV 스크린을 활용, 영상 홍보 및 통합 안내 콘텐츠를 중앙에서 관리/분산 송출 하는 시스템 구축">
|
||||
<title>Signage 솔루션 — 빌딩(건물) 영상홍보 통합안내 시스템 | TRONT</title>
|
||||
<link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
|
||||
<link rel="stylesheet" href="../image-viewer.css">
|
||||
<script src="../image-viewer.js" defer></script>
|
||||
<link rel="stylesheet" href="../icons.css">
|
||||
</head>
|
||||
<body class="portfolio-page case--signage">
|
||||
<!-- 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="#case-main">본문으로 바로가기</a><div class="case-progress" aria-hidden="true"></div>
|
||||
<header class="case-header"><div class="wrap"><a class="case-back" href="../index.html#project-signage" data-back-to-work><span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-left" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span> 포트폴리오 목록</a><a class="case-brand" href="../index.html" 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><a class="case-header-contact" href="../index.html#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></div></header>
|
||||
<main id="case-main">
|
||||
<section class="case-hero wrap">
|
||||
<div class="case-eyebrow case-enter"><span>TRONT / SELECTED WORK</span><span>PROJECT 07 — 08</span></div>
|
||||
<div class="case-title-row"><div><p class="case-project-brand case-enter">Signage 솔루션</p><h1 class="case-enter">빌딩(건물) 영상홍보 통합안내 시스템</h1></div><span class="arrow-slot case-hero-arrow case-enter" aria-hidden="true"><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></span></div>
|
||||
<dl class="case-meta case-enter"><div><dt>PROJECT PERIOD</dt><dd>2012.02 — 2012.11</dd></div><div><dt>OUR ROLE</dt><dd>중앙 관리 시스템 및 서버 구축 · 스케줄 및 파일 전송 로직 구현 · Infotrans Editor 및 Multi Manager 기능 구현</dd></div><div><dt>PLATFORM</dt><dd>멀티비전 / DID TV / 중앙 관리 시스템</dd></div></dl>
|
||||
</section>
|
||||
<div class="case-cover case-enter"><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">PROJECT SCREENS <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>
|
||||
<nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>Signage 솔루션</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">시스템 구성</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
|
||||
<section id="overview" class="case-overview case-section wrap">
|
||||
<div class="case-section-label case-reveal"><span>01 / OVERVIEW</span><span>프로젝트 소개</span></div>
|
||||
<div class="case-overview-grid">
|
||||
<h2 class="case-reveal">하나의 콘텐츠를,<br>건물 곳곳의 화면으로.</h2>
|
||||
<div class="case-reveal"><p>빌딩(건물) 내 멀티비전 및 DID(Digital Information Display) TV 스크린을 활용, 영상 홍보 및 통합 안내 콘텐츠를 중앙에서 관리/분산 송출 하는 시스템 구축</p></div>
|
||||
</div>
|
||||
<div class="case-features" aria-label="서비스 대상, 주요 기능, 적용 기술">
|
||||
<article class="case-feature case-reveal"><span class="feature-index">01</span><h3>서비스 대상</h3><p>빌딩 내 멀티비전과 DID TV 스크린으로 영상 홍보 및 통합 안내 콘텐츠를 제공하는 시스템입니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">02</span><h3>주요 기능</h3><p>콘텐츠를 중앙에서 관리하고 네트워크로 분산 송출합니다. Infotrans Editor로 콘텐츠를 제작·편집하고 Multi Manager로 일일·월간 스케줄을 편성합니다.</p></article>
|
||||
<article class="case-feature case-reveal"><span class="feature-index">03</span><h3>적용 기술</h3><p>C++, JSP/Servlet, ASP.NET, Oracle을 사용해 중앙 관리 시스템과 서버, 스케줄 및 파일 전송 로직, 콘텐츠 편집·관리 기능을 구현했습니다.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="case-screens case-section"><div class="wrap"><div class="case-section-label case-reveal"><span>02 / SCREENS IN FOCUS</span><span>시스템 구성</span></div><div class="case-screen-heading case-reveal"><h2>화면으로 만나는<br><span>프로젝트의 디테일.</span></h2><p>콘텐츠 제작부터 화면 송출까지,<br>시스템의 연결 구조를 살펴보세요.</p></div><div class="screen-tabs case-reveal" role="tablist" aria-label="Signage 솔루션 시스템 구성"><button id="screen-tab-0" role="tab" aria-selected="true" aria-controls="screen-0" tabindex="0" data-screen="0"><span>01</span>시스템 구성</button></div><div class="screen-gallery case-reveal"><figure class="case-screen is-current" id="screen-0" role="tabpanel" aria-labelledby="screen-tab-0" tabindex="0"><div class="screen-canvas"><img src="../assets/images/signage_01.png" alt="중앙·개별 관리자가 콘텐츠와 스케줄을 관리하고, 네트워크를 통해 건물의 멀티비전 및 DID TV로 송출하는 시스템 구성도입니다." loading="lazy" width="3859" height="1947"></div><figcaption><span>01 / 01</span><p>중앙·개별 관리자가 콘텐츠와 스케줄을 관리하고, 네트워크를 통해 건물의 멀티비전 및 DID TV로 송출하는 시스템 구성도입니다.</p><a href="../assets/images/signage_01.png" target="_blank" rel="noopener" aria-label="시스템 구성 전체 화면으로 보기">크게 보기 ⤢</a></figcaption></figure></div><p class="case-source-note">프로젝트 화면 자료입니다.</p></div></section>
|
||||
<section class="case-next"><a href="gps-building.html" class="wrap case-next-link"><div><span class="tiny-label">KEEP EXPLORING / NEXT PROJECT</span><h2>GPS 솔루션</h2><p>GPS 트래킹 기반 위치확인 시스템 개발</p></div><span class="arrow-slot case-next-arrow" 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></span></a></section>
|
||||
<section class="case-connect wrap"><div><p class="tiny-label">LET'S BUILD WHAT'S NEXT.</p><h2>다음 프로젝트,<br>함께 만들어가요.</h2></div><a href="../index.html#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></section>
|
||||
</main>
|
||||
<footer class="case-footer wrap"><a href="../index.html">주식회사 트론트</a><span>© 2026 TRONT. All rights reserved.</span><a href="#case-main">맨 위로 <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></footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user