TRONT 회사 홈페이지

docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf를 기반으로 만든 한국어 반응형 회사 홈페이지입니다. HTML, CSS, JavaScript만 사용하며 프레임워크, 패키지 설치, 빌드 과정이 필요하지 않습니다.

실행

index.html을 브라우저에서 열면 됩니다. 로컬 서버를 사용하려면 프로젝트 폴더에서 다음 명령을 실행합니다.

python3 -m http.server 8000 --bind 127.0.0.1

이후 http://127.0.0.1:8000에 접속합니다.

문의 영역

• index.html#contact: 이메일 주소와 복사 버튼을 제공하는 문의 영역입니다. 스타일은 contact-email.css, 복사 및 결과 안내는 contact-email.js에 있습니다.
• index-form.html#contact: 기존 문의 폼형을 그대로 보존한 페이지입니다. 이름·회사명·이메일·연락처·문의내용·파일첨부를 받으며, 필수 입력 확인, 글자 수 표시, 첨부파일 선택·삭제·드래그와 전송 완료 안내 모달을 지원합니다. 모달은 확인 버튼·닫기 버튼·Esc·바깥 영역 클릭으로 닫습니다.
• 문의 스타일은 contact-form.css, 폼 동작은 contact-form.js에 있습니다.
• 현재는 전송 완료 화면까지만 구현되어 있으며 입력 내용과 파일을 전송하거나 저장하지 않습니다. 실제 접수에는 서버 연동이 필요합니다. 첨부는 최대 5개, 합계 20MB까지 선택할 수 있습니다.

메인 페이지의 ‘프로젝트 문의’ 버튼은 이메일 문의 영역으로 이동합니다.

파일

• index.html: 회사 소개, 사업 영역, 프로젝트 8개, 연혁, 이메일 문의
• index-form.html: 기존 문의 폼을 포함한 회사 홈페이지
• styles.css: 색상, 타이포그래피, 반응형 레이아웃 및 모션
• company.css: 회사 개요·대표이사·조직도를 통합한 패널과 특허 영역. 기존 사업영역의 스타일과 동작은 유지합니다.
• script.js: Canvas 입체 그래픽, 프로젝트 필터, 연혁 탭, 메뉴, 스크롤 효과
• map-dialog.js, map-dialog.css: 오시는 길 지도 모달, 닫기·뒤로가기 처리와 원래 스크롤 위치 복원
• icons.css: 제공된 assets/icons/arrow_right_alt.svg 모양을 사용하는 공통 화살표 크기·방향·중앙 정렬. 파일로 직접 열어도 표시되도록 각 HTML의 인라인 심벌을 참조합니다.
• portfolio.css: 프로젝트별 표지 그래픽, 포트폴리오 전용 페이지, 반응형 레이아웃과 페이지 전환
• portfolio.js: 포트폴리오 호버·스크롤 모션, 갤러리 탭, 읽기 진행률, 목록 복귀
• projects/: 프로젝트 8개의 독립 HTML 페이지. 각 파일의 주소를 직접 열거나 공유할 수 있습니다.
• assets/images/: 로고, 특허증, 프로젝트 화면. 프로젝트 이미지는 프로젝트명_01.png, 프로젝트명_02.png 형식이며 번호는 상세 갤러리 순서와 같습니다. 화면을 사용하는 목록 카드와 상세 표지는 같은 파일을 참조합니다. RF 자산관리·Signage·GPS는 독립 그래픽 표지를 사용하고, 제공 이미지는 상세 갤러리에 표시합니다.
• assets/images/archive/: 현재 화면에서 사용하지 않는 합본 이미지와 이전 버전. 원본 보관용이며 갤러리에 연결하지 않습니다.
• docs/: 원본 회사소개서, 소개서 다운로드 링크의 대상

콘텐츠 기준

• 설립일: 2008년 12월 1일
• 대표이사: 김칠수
• 직원 수: 소개서에 명시된 2025년 10월 기준 18명
• 프로젝트와 개발 범위·수행 기간: 소개서 6~14페이지
• 연혁: 소개서 2페이지 및 프로젝트 상세 페이지
• 대표이사·조직: 회사소개서의 회사 개요와 조직도를 통합해 대표이사 김칠수, 기술지원팀, 개발1팀(Web·모바일 앱), 개발2팀(내비게이션)을 표시합니다.
• 특허: 소개서 4페이지에 수록된 특허증 2개를 별도 영역에서 소개합니다. 제10-0951362호(객체 가상 이미지 구현 방법), 제10-1099507호(액체 세제 자동 판매 장치)의 특허번호·출원일·등록일은 증서에 기재된 내용을 사용하며, 현재 권리 보유·유효 상태를 별도로 주장하지 않습니다.
• 사업 내용은 홈페이지에 맞게 재구성했으며, 프로젝트 성과 수치나 고객 추천사는 임의로 추가하지 않았습니다.

프로젝트 상세 편집 기준

• 현재 프로젝트 8개의 근거 자료는 회사소개서 PDF의 프로젝트 수행 내역입니다. PPT의 제목·설명이 바뀌면 해당 원문을 기준으로 갱신합니다.
• 제목은 원문을 유지하고, 앱·브랜드명은 제목 위에 따로 표시합니다. 목록 카드와 다음 프로젝트 링크에도 같은 제목을 사용합니다.
• 기간은 원문의 날짜를 통일된 표기로 표시합니다. 개발 범위에서는 괄호 안 기술명을 분리하고, 플랫폼은 원문이나 화면에 확인되는 앱·웹·장비만 표시합니다. 확인되지 않은 iOS·Android 등은 추가하지 않습니다.
• 오버뷰 메인 타이틀만 프로젝트 성격에 맞게 작성합니다. 오른쪽 설명은 소개서 제목 바로 아래 문장을 그대로 사용합니다.
• 오버뷰 01 서비스 대상: 누구 또는 무엇을 위한 프로젝트인지 요약합니다. 02 주요 기능: 원문에 명시된 기능만 요약합니다. 03 적용 기술: 개발 범위에 명시된 기술과 사용한 부분을 문장으로 풀어 씁니다. 세 항목 모두 문장형 설명을 사용합니다. 성과·효과·미기재 기능은 덧붙이지 않습니다.
• 별도 BUILT BY TRONT 섹션과 회사소개서의 특정 페이지로 이동하는 프로젝트 링크는 두지 않습니다.

프로젝트	갤러리 이미지 순서
mobility	mobility_01.png 차량 내 HMI / _02 설정 / _03 지도 / _04 경치 좋은 길
pharmacy	pharmacy_01.png 앱 메인 / _02 웹 메인 / _03 관리자 대시보드
bems	bems_01.png 표준 대시보드 / _02 센서 정보 / _03 EV 충전
givon	givon_01.png 기부 프로젝트 / _02 단체 관리 / _03 봉사 프로젝트
bispet	bispet_01.png 앱 메인 / _02 관리자 대시보드
asset	asset_01.png 시스템 구성도
signage	signage_01.png 콘텐츠 관리·분산 송출 시스템 구성도
gps-building	gps-building_01.png GPS 위치확인 시스템 구성도

archive/bems_01.png, archive/givon_01.png, archive/bispet_01.png는 기존 합본입니다. archive/bispet_02.png, archive/bispet_03.png는 교체 전 앱·관리자 이미지입니다. 화면 이미지를 교체할 때는 파일명과 함께 HTML의 width, height, 대체 텍스트·캡션도 확인합니다.

실제 서비스 화면에 표현된 문구와 정보는 제공된 소개서의 이미지에 포함된 내용입니다. 공개 전 회사의 프로젝트 화면 공개 범위와 연락처를 확인해 주세요.

동작 및 접근성

• 데스크톱, 태블릿, 모바일 레이아웃
• 회사 개요·대표자·조직도 통합 배치, 독립 특허 영역과 증서 이미지 확대 보기
• 분야별 프로젝트 필터와 독립 포트폴리오 페이지(기간·개발 범위·플랫폼, 개요와 기술, 프로젝트 화면, 다음 프로젝트)
• 키보드 화살표, Home, End를 지원하는 화면 갤러리와 원본 이미지 보기
• 목록에서 포트폴리오를 열고 돌아오면 선택한 필터를 유지합니다. 브라우저 저장 기능이 없어도 기본 탐색은 가능합니다.
• 키보드 화살표, Home, End를 지원하는 연혁 탭
• 사업 영역 아코디언: 높이 전환, 설명·태그 순차 등장, 선택 분야와 연동되는 도형 모션. 연속 클릭·전환 중 화면 크기 변경 시 진행 중인 모션을 정리합니다.
• 프로젝트 카드: 실제 개발 내용을 제목으로 표시하고, 프로젝트별 색상·타이포그래피·CSS 그래픽과 대표 화면을 조합합니다. 실제 개발 화면은 상세 페이지의 별도 갤러리에서 확인합니다.
• 지원 브라우저에서 페이지 간 전환 애니메이션, 포인터 반응, 스크롤에 따른 그래픽 이동 및 순차 등장 효과를 제공합니다. 모션 감소 설정에서는 움직임을 최소화합니다.
• 모바일 메뉴
• ‘지도에서 보기’는 사이트 안의 모달로 열립니다. 구글 지도에 IT융합산업빌딩을 표시하며 닫기 버튼, 바깥 영역 클릭, 브라우저 뒤로가기로 닫을 수 있습니다. 지도는 모달을 열 때만 불러오며 인터넷 연결이 필요합니다.
• 모달 안의 ‘지도에서 열기’는 전체 지도를 새 탭에 열고 홈페이지는 유지합니다.
• 애니메이션 일시정지, 운영체제의 모션 감소 설정 지원
• Canvas는 화면 밖이나 다른 탭에서 렌더링을 중지합니다.
• 본문 바로가기, 포커스 표시, 이미지 대체 텍스트, 의미 있는 HTML 구조

외부 CDN이나 폰트 라이브러리를 사용하지 않아 다운로드한 파일만으로 홈페이지 화면을 확인할 수 있습니다. 지도 모달은 외부 지도 서비스를 불러옵니다.

연혁 편집

연혁 내용은 index.html과 index-form.html의 #journey 안에 있습니다. 각 timeline-panel-연도의 제목과 설명을 수정하고, 설명 안의 핵심 기술은 <strong>으로 강조합니다. script.js는 탭 전환과 키보드 이동만 담당하고, 강조 스타일은 journey.css에서 관리합니다. 두 페이지의 연혁은 함께 수정합니다.