태성이엔지 포털

먼저 드릴 말씀

애플 디자인을 그대로 쓰면
현장에서 안 보입니다.

애플은 실내에서 맨손으로 보는 화면을 전제로 만들어졌습니다. 얇은 글씨, 낮은 대비, 작은 터치 영역. 현장은 직사광선 + 장갑 낀 손입니다.

그래서 이렇게 나눕니다.
애플에서 「구조」는 전부 가져오고, 「치수」는 현장 기준을 지킵니다.

· 가져올 것 — 색 팔레트 · 타이포 위계 · 여백 · 카드 라운드 · 반투명 헤더 · 푸터
· 지킬 것 — 버튼 최소 높이 60px · 글자 굵기 600 이상 · 명암비 4.5:1 이상

애플 그대로 가는 화면

로그인 · 대시보드 · 집계 · 관리 · 달력
사무실에서 PC로 보는 화면입니다. 얇고 넓고 조용하게.

치수를 지키는 화면

안전패트롤 등록 · 작업일지 입력
현장에서 장갑 끼고 누릅니다. 색과 여백만 애플로 바꾸고 버튼 크기는 지금 그대로 둡니다.

로그인 다음

세 사람만 갈림길을 봅니다.

안전패트롤 권한이 있는 강신욱 · 허재영 · 김대수 세 분만 선택 화면을 만나고, 나머지 26명은 곧바로 근무내역으로 들어갑니다.

🦺 + 📝 선택 화면

강신욱 — 시스템 마스터
허재영 — 안전관리
김대수 — 리더 · 현장관리
3명

🦺 현장 안전 패트롤지적·우수 기록 ›

📝 근무내역작업일지·집계 ›

←　로그인　→

📝 근무내역으로 직행

이명재 · 최민선 · 김진만 · 김철효 · 정대윤 · 박상준 …
나머지 26명

📝 바로 대시보드중간 화면 없음 ›

안 쓰는 버튼을 보여주면 매번 한 번씩 더 눌러야 합니다. 26명 × 하루 1회 × 한 달이면 780번입니다.

이명재 부장님도 직행합니다. 근무 최종승인권자시지만 안전패트롤은 안 쓰십니다. 권한은 「그 화면을 실제로 쓰는가」로 나눴지 직급으로 나누지 않았습니다. 필요해지시면 명단 화면에서 체크 하나로 열립니다.

강신욱 · 시스템 마스터

「잘 돌아가고 있나」를 봅니다.

부장님 화면이 승인할 것을 보여준다면, 마스터 화면은 시스템이 어긋난 곳을 보여줍니다. 성격이 다릅니다.

① 안 올리는 사람

3명

근무표에는 있는데 3일 넘게 일지가 없는 사람. 까먹은 건지, 로그인을 못 하는 건지 구분해서 보여줍니다.

② 계정이 안 도는 곳

2건

한 번도 로그인 안 한 계정, 초기 비밀번호 그대로인 계정, 평소와 다른 기기. 사람 문제가 아니라 시스템 문제로 봅니다.

③ 계산이 막힌 곳

0건

달력 미확정, 명단에 없는 이름, 근무표와 실제가 다른 날. 결산 전에 막히는 것들을 미리 잡습니다.

여기에는 개인 시간도 금액도 없습니다. 마스터는 시스템 상태를 보는 자리이지 근무를 평가하는 자리가 아닙니다. 강신욱 님께 「누가 몇 시간 일했나」는 일부러 넣지 않았습니다. 필요하시면 말씀해 주십시오.

안전패트롤

색과 여백만 바꿉니다.

7단계 마법사, 초성 검색, 위반사항 171종, 사진 3경로 — 동작은 하나도 건드리지 않습니다. 이미 현장에서 검증된 흐름입니다.

항목	지금	바꾼 뒤
헤더	네이비 단색 · 불투명	흰색 반투명 + 블러 · 얇은 경계선	바꿈
배경	#f2f4f7 회색	#f5f5f7 (애플 회색)	바꿈
강조색	네이비 · 주황 · 빨강 · 초록 넷	파랑 하나 + 판정용 빨강/초록	바꿈
카드 모서리	14px	18px	바꿈
푸터	없음	애플식 다단 푸터 추가	바꿈
버튼 높이	최소 60px (clamp + dvh)	그대로	유지
글자 크기·굵기	본문 17px · 버튼 800	그대로	유지
7단계 마법사	사진→수행사→작업명→위치→내용→조치→확인	그대로	유지
초성 검색 · 오프라인 큐	동작 중	그대로	유지
엑셀 · 사진 ZIP · 통계	동작 중	그대로	유지
로그인	이름 격자 + PIN 6자리	포털 로그인으로 흡수 (이름 + 비밀번호)	없앰

가장 큰 변화는 로그인이 하나가 되는 것입니다. 지금은 안전패트롤에 따로 PIN 6자리로 들어가십니다. 포털로 합치면 비밀번호가 하나가 되고, 안전패트롤은 포털 안의 한 메뉴가 됩니다. 옛 주소로 들어오시면 새 주소로 안내합니다.

주의 — 이 작업에는 데이터 이사가 없습니다. Supabase 는 그대로이고 기존 패트롤 기록도 전부 남습니다. 다만 계정 체계가 PIN 6자리 → 비밀번호로 바뀌므로 강신욱 · 허재영 · 김대수 세 분은 새 비밀번호를 한 번 받으셔야 합니다.

뒤로가기

뒤로 눌러도 나가지지 않습니다.

말씀하신 대로 지금 시안은 뒤로가기를 누르면 사이트를 나가버립니다. 휴대폰에서는 무의식적으로 누르는 버튼이라 반드시 막아야 합니다. 고쳤습니다.

이렇게 동작합니다

① 화면을 옮길 때마다 브라우저 기록에 한 칸씩 쌓습니다
② 뒤로가기를 누르면 앱 안에서 이전 화면으로 돌아갑니다
③ 첫 화면에서 누르면 「한 번 더 누르면 나갑니다」가 뜹니다
④ 2초 안에 다시 누르면 그때 나갑니다
⑤ 작성 중이던 일지가 있으면 「저장하지 않고 나갈까요?」를 먼저 물어봅니다

탭을 닫거나 새로고침할 때도

작성 중인 내용이 있으면 브라우저가 「이 사이트를 나가시겠습니까?」를 띄웁니다. 쓰던 일지가 그냥 날아가지 않습니다.

홈 화면에 추가하면 더 낫습니다

PWA로 설치하면 주소창 자체가 사라져서 실수로 나갈 일이 거의 없습니다. 안드로이드 시스템 뒤로가기도 위 규칙을 그대로 따릅니다.

한 가지 한계를 미리 말씀드립니다. 브라우저는 「나가지 못하게 완전히 막는 것」을 허용하지 않습니다. 악성 사이트가 사용자를 가두는 것을 막기 위한 규칙입니다. 그래서 두 번 눌러야 나가게 하는 것이 실질적으로 가능한 최선이고, 안드로이드 앱들이 쓰는 방식과 같습니다.

어떻게 적용하나

토큰 한 벌만 바꿉니다.

지금 앱은 색·치수가 CSS 변수 한 곳에 모여 있습니다. 그 값만 갈아끼우면 화면 전체가 따라옵니다.

        /* app/style.css — 이 블록만 교체 */

        :root{

          --navy:#12395e  → 
          --ink:#1d1d1f

          --bg:#f2f4f7   → 
          --gray:#f5f5f7

          --amber/--red/--green 4색 →
          --blue:#0071e3 + 판정 2색

          --r:14px     → 
          --r:18px

          --tap:60px    
          ← 건드리지 않음

        }
      

여기에 헤더·푸터 두 조각을 새로 넣으면 끝납니다. 마법사·목록·통계 화면은 코드를 한 줄도 안 고쳐도 새 색을 따라옵니다.

작업 순서

#	내용	건드리는 곳
1	CSS 토큰 한 벌 교체 (색 · 라운드)	style.css
2	애플식 헤더 · 푸터 추가	index.html · style.css
3	포털 로그인 화면 (이름 + 비밀번호)	신규
4	권한별 진입 분기 — 3명만 선택 화면	app.js
5	안전패트롤을 포털 메뉴로 편입	index.html
6	강신욱 마스터 화면 (시스템 상태)	신규
7	뒤로가기 처리 — 앱 안에서 이동 · 두 번 눌러야 나감	완료
8	옛 주소 접속 시 새 주소 안내	ts-safety-patrol

현장 화면은 마지막에 확인합니다. 색을 바꾸면 야외 시인성이 달라질 수 있어서, 배포 전에 실제 휴대폰을 밖에서 한 번 보셔야 합니다. 어둡게 느껴지면 --tap 과 글자 굵기는 그대로 두고 대비만 올리겠습니다.

같은 회사, 같은 얼굴.

애플 디자인을 그대로 쓰면현장에서 안 보입니다.