tront.noname.company/README.md

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: 회사 소개, 사업 영역, 프로젝트 8개, 연혁, 문의 정보
• 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/: 원본 회사소개서, 소개서 다운로드 링크의 대상

연락처 교체

사용자 요청에 따라 아래 연락처는 임시 정보입니다. 실제 인물에게 연결되지 않도록 예약된 .example 이메일을 사용했습니다.

• 이메일: hello@tront.example
• 전화번호: 053-000-0000

script.js 상단 CONTACT의 email, phone을 실제 정보로 바꾸고 temporary를 false로 변경합니다. JavaScript 비활성 환경에서도 같은 정보를 표시하도록 index.html의 이메일, 전화번호, mailto:, tel:도 함께 수정합니다. 실제 정보로 교체한 뒤 .contact-placeholder의 임시 연락처 문구를 삭제할 수 있습니다.

문의 버튼은 메일 앱을 엽니다. 이메일 주소 복사는 보안 환경(HTTPS 또는 localhost)에서 작동하며, 사용할 수 없으면 주소를 선택해 수동 복사를 안내합니다. 서버가 없는 정적 사이트이므로 문의 접수나 이메일 발송을 수행하지 않습니다.

콘텐츠 기준

• 설립일: 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이나 폰트 라이브러리를 사용하지 않아 다운로드한 파일만으로 홈페이지 화면을 확인할 수 있습니다. 지도 모달은 외부 지도 서비스를 불러오며 이메일/전화 링크는 기기 앱으로 연결됩니다.