회사 홈페이지를 다시 만들었습니다: 헤드라인 한 줄이 제일 오래 걸렸습니다

회사 홈페이지 goinglabs.co.kr 을 다시 만들었습니다. 페이지 하나입니다.

PC 첫 화면. 질문 한 줄, 답 한 문단, 버튼 둘.

왜 다시 만들었나

전 홈페이지는 제품 소개가 반이었습니다. 그런데 제품은 이제 intosen.com 이 맡습니다. SENVAS · SENBRIX · SENBRINO 가 거기 있고, 매뉴얼도 구매도 거기서 합니다.

그러면 회사 홈페이지에 남는 일은 둘입니다. 우리가 어떤 회사인지 말하는 것, 그리고 제어 개발을 맡기고 싶은 분이 연락할 창구가 되는 것. 그 둘만 남기고 나머지는 뺐습니다.

뭐가 달라졌나

첫 줄이 질문입니다. “기계가 바뀔 때마다 새 업체 찾고 계신가요?” 기계 만드는 회사가 제어를 외주 줄 때 제일 피곤한 게 그겁니다. 장비가 하나 바뀌면 제어 업체를 또 찾아야 하고, 지난 업체가 소스를 안 주고 사라진 경우도 있고요. 그 질문에 페이지가 순서대로 답하게 짰습니다.

1. 다음 기계도 같은 곳이면 되는 이유 — 보드도 PLC 도 화면도 한 곳에서 / 소스 · 도면은 귀사에 남습니다 / 우리 제품을 직접 만들어 팝니다
2. 하는 일 — 제어 · 화면 / 보드 · 소량 개발 / 데이터 · 소프트웨어
3. 자사 제품 SEN (intosen.com 으로 보냅니다)
4. 일하는 방식 — 지키는 네 가지
5. 회사 소개
6. 무료 검토 요청

휴대폰에서는 헤드라인이 두 줄, 이유 카드가 세 장 세로로 섭니다.

색은 라임입니다. 회사 CI 는 파랑인데, 파랑은 다음 제품에 쓰려고 아껴 두었습니다. 제품마다 색이 있어서(민트 · 마젠타 · 오렌지) 그것과도 겹치지 않는 색이어야 했고요. 탭 아이콘만 CI 그대로 두고, 페이지는 라임으로 갔습니다.

사진은 실물만. 조립 끝난 보드가 줄지어 놓인 양산 사진, 기계에 붙어 켜져 있는 터치 HMI, RP2350 으로 만든 승마 기계 컨트롤러, 소프트웨어 화면 두 장, 그리고 모션 시뮬레이터가 도는 시운전 영상 20초. 영상은 화면에 들어올 때만 재생됩니다.

문의는 메일로만 받습니다. 폼을 만들었다가 뺐습니다. 버튼을 누르면 메일 앱이 열리고 제목과 본문 틀(어떤 기계인지 · 하고 싶은 것 · 기존 장비 · 희망 일정)이 채워져 있습니다. 서버 쪽에 받는 코드가 없어서 관리할 것도 없습니다. 전화 버튼은 휴대폰에서만 걸리고, PC 에서는 번호만 보입니다.

정하면서 틀렸던 것

헤드라인. 처음엔 “회로부터 화면까지, 제어는 한 팀에서 끝냅니다” 였습니다. 작은 회사가 “팀” 을 반복하니 과장으로 읽혔습니다. 다음엔 파트너십을 말하려다 “책임집니다”, “끝까지”, “다시 옵니다” 같은 말이 들어갔는데, 그건 공개 페이지에 걸 수 없는 약속입니다. 무상 · 무기한으로 읽히니까요. 스무 개쯤 써서 열 개로 줄이고, 그중에서 발주하는 분 사정을 그대로 묻는 문장을 골랐습니다. 질문이니까 지켜야 할 약속이 안 생깁니다.

사진. 제어반 배선 사진을 넣었다가 뺐습니다. 우리는 배선을 하지 않습니다. 없는 일을 있는 것처럼 보이게 하면 견적 단계에서 어긋납니다. 옛날 사진 폴더에서 고른 보드 사진이 우리 보드가 아니었던 적도 있습니다. 그 뒤로 올릴 사진은 우리가 만든 게 맞는지 한 장씩 다시 봤습니다.

문장. 다 쓰고 읽어 보니 “A 부터 B 까지”, “~까지 만듭니다” 같은 매끈한 문장이 반복되고 있었습니다. 전화로 설명할 때 쓰는 말로 다시 고쳤습니다. “그 근거 셋입니다” 는 “이유는 세 가지입니다” 로, “실제로 만들 사람이 받습니다” 는 “전화는 개발하는 사람이 받습니다” 로.

만든 방법

정적 HTML · CSS · JS 한 벌입니다. 빌드가 없습니다. nginx 컨테이너에 그대로 올라가고, GitHub 에 push 하면 30초쯤 뒤에 반영됩니다.

작은 함정 하나. 카드 배경 사진을 CSS 변수(--bg: url(...))로 HTML 의 style 속성에 두었더니, Chrome 이 그 경로를 CSS 파일 위치 기준으로 풀어서 서버에서 404 가 났습니다. 시안 파일에서는 사진이 안에 박혀 있어서 안 드러났습니다. 변수 선언을 스타일시트로 옮기니 경로가 그 파일 기준으로 풀려 404 가 사라졌습니다.

페이지 전체. 위에서부터 질문 → 이유 → 하는 일 → 제품 → 방식 → 회사 → 검토 요청.

남은 것

작업실 사진 한 장이 비어 있습니다. 옛 사진은 전부 지금 작업실이 아니라서 넣지 않았습니다. 찍는 대로 넣겠습니다.

제어 개발이 필요하시면 goinglabs.co.kr 아래쪽 메일 버튼으로 보내 주세요. 사양서가 없어도 됩니다.