zenn
7b4badf5a4
- 메인 문의 영역을 이메일 주소와 복사 버튼으로 구성하고 복사 결과 안내를 추가 - 문의 폼 페이지를 별도로 보존하고 입력 검증, 파일 첨부 및 완료 안내 동작을 추가 - 제거된 문의 요소를 참조하던 공통 스크립트를 정리해 초기화 오류 방지 - 이메일 복사 버튼의 특수 문자 화살표를 공통 SVG로 통일 - 공유 시 특허증 대신 트론트 로고를 사용하도록 공유 메타 정보 지정 - 공통 스크립트와 포트폴리오 CSS에 버전 URL을 적용해 이전 CDN 캐시 우회 - 프로젝트 및 특허 영역의 자료 기준 안내와 소개서 보기 링크 제거 - 프로젝트 상세 페이지 8개의 상단 썸네일 화살표를 제거하고 마우스 반응 효과 유지 - 특허증 이미지 파일을 갱신하고 문의 구조와 동작 설명을 README에 반영 검증: 공통·이메일·문의 폼 JavaScript 문법 검사 및 변경 공백 검사 통과 확인: 버전이 붙은 운영 사이트 JS와 CSS가 로컬 파일과 동일함 참고: 문의 폼은 서버 전송 없이 화면 동작만 제공하며 이메일 주소는 임시 값 유지
81 lines
10 KiB
HTML
81 lines
10 KiB
HTML
<!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?v=780175b64ad9"><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</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> |