tront.noname.company/README.md

# TRONT 회사 홈페이지

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

## 실행

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

```sh
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`에서 관리합니다. 두 페이지의 연혁은 함께 수정합니다.