운영 중 · 2026.10 공개 · 2026.11 확인
Young Signs 웹사이트 리뉴얼
캐나다 버나비의 간판 제작·시공 회사 Young Signs의 홈페이지입니다. 휴대폰에서 어느 화면이든 바로 전화나 견적 요청으로 이어지고, 영어·한국어·일본어로 읽을 수 있습니다.
고객사 사이트 · 모바테크 제작·운영
요약
- 무엇
- 캐나다 BC주 간판 제작·시공 회사의 세 언어 홈페이지와 견적 요청 접수
- 한 일
- 기획, 디자인, 웹·DB 설계, 개발, 영어·한국어·일본어 문안, SEO, 기존 사례 이전과 옛 주소 영구 이동, 호스팅·네트워크 구성, 공개 후 운영·유지보수. 이전 사이트의 시공 사례 519건을 사진과 함께 새 사이트로 옮김
- 결과
- 2026년 10월 공개. 시공 사례마다 상세 페이지를 만들어 sitemap에 영어·한국어 각 522개 등록(2026-11-01 기준). 휴대폰에서는 모든 화면 하단에 전화·견적 버튼
프로젝트 정보
- 고객
- Young Signs · 간판 제작·시공 · 캐나다 BC주 버나비
- 시장
- 버나비·메트로 밴쿠버를 중심으로 한 BC주의 매장(지역 페이지 18곳)
- 역할
- 기획 · 디자인 · 웹·데이터 설계 · 개발 · 언어별 문안 · 기존 콘텐츠 이전 · SEO · 호스팅·네트워크 구성 · 운영·유지보수하지 않은 일: 사진 촬영, 지도·리뷰 프로필 관리
- 팀
- 디자이너 1명(업무위탁) + 대표(개발 전부·고객 소통)이 프로젝트를 작업한 팀
- 기간
- 2026.10
- 플랫폼
- 웹(휴대폰·PC) · 영어 · 한국어 · 일본어
- 계약 형태
- 직접 계약
- 출시 후 상태
- 운영 중 · 모바테크 운영·유지보수
- 사용 기술
- Astro · Preact · Tailwind CSS · 클라우드 호스팅 · 봇 차단 · 접근 제어
- 링크
- 사이트 확인하기 (새 탭에서 열림)youngsignsbc.com2026-11-09 확인sitemap.xml (새 탭에서 열림)youngsignsbc.com2026-10-31 확인이전 사이트 보관본 (새 탭에서 열림)web.archive.org2026-10-31 확인
결과
- 측정값(MOVA 측정)
1.06–1.12
휴대폰 첫 화면 표시까지(초, FCP)
가장 큰 사진 표시(LCP) 3.00–3.23초 · 느린 모바일 회선·CPU 감속 조건, 영어·한국어·일본어 홈. 홈 전송량 517 KB. 홈 첫 사진은 최신 사례로 바뀌므로 측정 시점 값입니다.
자료: MOVA 측정 · 2026-11-01 02:51 UTC2
- 측정값(MOVA 측정)
522
시공 사례 상세 페이지
이전 사이트에는 사례별 페이지가 없었습니다. 기존 사례 519건을 옮기고 새로 올라온 사례를 더해 sitemap에 등록했습니다.
- 납품 사실
3
언어(영어·한국어·일본어) 페이지와 견적 요청 폼
이전: 영어만, 견적은 전화·이메일로만, 눌러서 거는 전화 링크 없음(2025-07 보관본)
고객사가 업무 지표를 공개하지 않았습니다.
왜 필요했나
이전 사이트는 영어로만 된 사이트였고, 화면은 홈·포트폴리오·연락처 세 가지였습니다. Young Signs는 스스로를 '서부 캐나다 최초의 한인 간판 회사'로 소개하는데, 한국어로 읽을 수 있는 페이지는 없었습니다.1
견적 문의는 연락처 페이지의 전화번호와 이메일로 받았고, 휴대폰에서 번호를 눌러 바로 거는 링크는 없었습니다. 시공 사례는 포트폴리오 화면 하나에 모여 있었습니다.1
이전
이후
이전
이후
| 항목 | 이전 | 이후 |
|---|---|---|
| 언어 | 영어 | 영어·한국어·일본어 |
| 화면 | 홈·포트폴리오·연락처 | 사례·지역마다 상세 페이지, sitemap 주소 1,101개 |
| 견적 경로 | 연락처 페이지의 전화번호·이메일 | 사진을 첨부하는 견적 폼, 휴대폰 하단 고정 전화·견적 바 |
| 휴대폰에서 전화 | 번호 표시 | 눌러서 거는 전화 링크 |
이전: 2025-07-14 보관본 · 이후: 2026-11-01 캡처
보관본 (새 탭에서 열림)web.archive.org
만든 것
언어마다 다시 짠 화면
한국어·일본어 문안도 저희가 썼습니다. 영어·한국어·일본어 페이지는 같은 구성으로 서로 이어집니다. 제목 서체도 언어마다 바꿨습니다. 영어는 간판 느낌의 좁은 디스플레이 서체를 쓰고, 한국어와 일본어는 기기의 고딕 서체를 쓰며, 줄바꿈도 언어마다 그 언어의 규칙을 따릅니다. 화면 하단 버튼의 말도 언어마다 바뀝니다.
지역마다, 시공 사례마다 검색되는 페이지
어느 화면에서든 전화나 견적으로
휴대폰에서는 모든 화면 하단에 전화·견적 버튼을 고정했습니다. 견적 폼은 필수 항목(이름, 전화나 이메일 중 하나, 내용)을 먼저 묻고 매장 사진도 함께 받습니다. 시기·연락 방법·알게 된 경로는 '선택' 묶음으로 따로 뒀습니다. 자동 제출은 봇 차단으로 거릅니다. 사이트에서 방문자가 직접 조작하는 부분은 이 폼과 사례 사진 확대뿐입니다.
공개 뒤에도 늘어나는 시공 사례
저희가 만든 관리 화면에서 사례를 올리면 휴대폰과 PC에 맞는 크기의 사진이 자동으로 준비되어 바로 사이트에 실립니다. 공개 뒤에도 사례가 계속 추가되고 있습니다(2026-10-22, 2026-10-24 등록 확인).5 관리 화면은 접근 제어로 보호되어 이 페이지에 싣지 않습니다.
어떻게 쓰이나
- 방문자 휴대폰·PC
- 영·한·일 페이지 — 언어마다 같은 페이지 구성
- 시공 사례 페이지
- 지역 페이지
- 하단 전화·견적 바 — 어느 화면에서든 같은 자리
- 눌러서 전화
- 견적 폼 — 꼭 필요한 항목 먼저, 선택 항목은 따로
- Young Signs가 연락
- 새 시공 사례 등록
- 사진 크기 자동 준비 — 휴대폰과 PC에 맞는 크기로
결정과 이유
사진은 올릴 때 미리 준비
- 이유
- 화면 크기에 맞는 사진을 사례를 올릴 때 만들어 두어, 페이지를 열 때마다 사진을 변환하지 않습니다. 사진 자리의 크기도 미리 정해 두어 읽는 동안 화면이 밀리지 않습니다(CLS 0.000–0.001).
- 트레이드오프
- 새로 올린 사진은 아직 더 가벼운 형식으로 만들어지지 않습니다. 다음에 할 것의 첫 항목입니다.
직접 조작하는 부분은 꼭 필요한 곳에만
- 이유
- 페이지는 HTML과 CSS로 그립니다. 방문자가 직접 조작하는 부분은 견적 폼과 사례 사진 확대뿐이고, 그 밖에는 모든 페이지에 붙는 작은 공통 스크립트와 진행 방식 페이지의 장면 연출 스크립트가 있습니다. 측정한 페이지의 자체 스크립트 중앙값은 1 KB이고, 자바스크립트를 꺼도 영어·일본어 홈의 제목과 본문이 보입니다.
- 트레이드오프
- 화면 전환 같은 움직임은 거의 없습니다. 견적 페이지는 봇 차단 스크립트를 더 받습니다.
한국어·일본어는 웹폰트 대신 기기 글꼴
- 이유
- 웹폰트는 영문용만 받고, 한국어와 일본어는 기기에 있는 글꼴과 언어별 줄바꿈 규칙으로 읽기 쉽게 맞췄습니다.
- 트레이드오프
- 영어 제목의 디스플레이 서체 인상이 한국어·일본어에는 없고, 기기마다 글꼴이 다릅니다.
주요 화면
품질과 운영
다음에 할 것
- 새로 등록한 사진도 기존 사례처럼 더 가벼운 형식으로 만들고, 홈의 가장 큰 사진(LCP)을 같은 조건으로 다시 잽니다.
- 회사 정보가 검색 결과에 더 정확히 나오도록 구조화 데이터를 보강합니다.
- 일본어 페이지는 검수를 마치면 검색에 열고, 그 전까지는 언어 연결 정보를 그 상태에 맞춥니다.
링크
- 사이트 확인하기 (새 탭에서 열림)youngsignsbc.com2026-11-09 확인
- sitemap.xml (새 탭에서 열림)youngsignsbc.com2026-10-31 확인
- 이전 사이트 보관본 (새 탭에서 열림)web.archive.org2026-10-31 확인
출처와 방법
- 1이전 사이트: 인터넷 아카이브(Wayback Machine) 보관본. 홈 2025-07-14, 포트폴리오 2019-07-06, 연락처 2022-04-23. 언어, 화면, 견적 경로, 전화 링크 같은 기능 사실만 비교했습니다.
- 2성능: MOVA가 헤드리스 Chrome으로 휴대폰 화면 크기·고해상도·CPU 감속·느린 모바일 회선·첫 방문 조건을 맞추고, 캐나다의 접속 환경에서 페이지마다 세 번 잰 중앙값입니다(2026-10-31, 홈 세 페이지는 2026-11-01에 다시 측정). Lighthouse·PageSpeed Insights 점수가 아닙니다. 자체 스크립트는 사이트 자신의 스크립트이고 견적 페이지를 뺀 측정 페이지의 중앙값입니다. 홈 값은 첫 사진(가장 최근 사례)에 따라 바뀌는 측정 시점 값입니다.
- 3sitemap: 공개 sitemap.xml을 받아 사례 상세 페이지와 지역 페이지 주소를 셌습니다(2026-11-01). 옮긴 기존 사례 수는 이전 작업 기록과 대조해 납품 사실로 고정한 값이라 다시 세지 않습니다.
- 4접근성·자바스크립트 끔: 영어·한국어·일본어 홈과 버나비 지역 페이지, 견적 페이지의 색 대비와 대체 텍스트를 axe-core로 자동 점검했고, 영어·일본어 홈을 자바스크립트를 끈 헤드리스 Chrome으로 렌더링했습니다(2026-10-31).
- 5공개·운영: 공개 월(2026년 10월), 기존 사례 이전, MOVA의 운영·유지보수는 대표가 확인한 사실입니다. 공개 뒤에도 사례가 등록되고 있음을 공개 sitemap에서 확인했습니다(2026-10-22, 2026-10-24 등록, 2026-10-31 확인).
- 6캡처: 헤드리스 Chrome으로 휴대폰·PC 화면을 고해상도로 캡처했고(2026-10-31, 2026-11-01), 자르기 외에는 편집하지 않았습니다. 한국어·일본어 글자는 캡처한 컴퓨터의 시스템 글꼴로 그려져 휴대폰에서는 다르게 보일 수 있습니다.
- 7옛 주소: 이전 사이트의 페이지 주소가 새 페이지로 영구 이동하는지 다시 요청해 확인했습니다(2026-10-31). 주소 목록은 싣지 않습니다.
Young Signs 웹사이트 리뉴얼
이 프로젝트를 작업한 팀
2026.10 공개 · 운영 중
김명섭
대표 · 프로그래머
- 사이트 구조·DB 설계, 프론트엔드·백엔드 개발
- 호스팅·네트워크 구성, SEO·속도 최적화
- 기존 시공 사례 519건(사진 포함) 이전
- 고객 소통, 공개 후 운영·유지보수
디자이너(업무위탁)
- 화면 디자인(EN·KO·JA)
다음 사례
납품 인보이스 시스템
캐나다 · 웹 앱 · 2026
캐나다 업체가 납품 때마다 엑셀로 직접 쓰던 인보이스를, 납품 수량만 입력하면 자동으로 작성·저장되는 시스템으로 바꿨습니다. 운영자는 스페인어·영어·한국어 중 편한 언어로 쓰고, 청구서는 영문 US Letter로 출력됩니다.
- 납품 수량 입력
- 자동 작성·저장
- 보관용·고객용 인쇄