상장을 준비하는 회사는 할 일이 산더미예요. 재무, 공시, 투자자 설명회까지요. 그 목록 끝자락에 늘 '홈페이지 정비'가 있어요. 그런데 투자자와 기자, 새로 입사할 사람들이 회사를 가장 먼저 확인하는 곳이 홈페이지라는 걸 떠올리면, 이 항목은 결코 끝자락에 둘 일이 아니에요.
나노 소재 기업 제이오가 코스닥 상장을 준비하며 홈페이지 리뉴얼을 맡겨 주셨어요. 오늘은 기존 홈페이지에서 무엇을 발견했고 어떻게 바꾸었는지, 다섯 가지로 나눠 들려드릴게요.
검색 결과에는 무엇이 나오고 있었을까요?
가장 먼저 확인한 건 검색이었어요. 기존 홈페이지를 검색하면 어디에 참가했다, 나눔을 실천했다, 전시회를 마쳤다는 문장들이 나왔어요. 홈페이지를 살펴보니 메인의 공지사항 영역을 그대로 긁어 온 문장이었어요.
투자자가 봐야 할 건 '고객의 가치를 창조하는 엔지니어링 전문기업'이라는 회사의 정체성인데, 그 문장은 어디에도 나오지 않았어요. 개발자 도구로 열어 보니 사이트 제목은 '제이오'로 되어 있지만, 그 뒤에 이어질 설명이 비어 있었어요. 설명이 없으니 검색엔진은 페이지에서 긁을 수 있는 아무 문장이나 가져다 쓴 거예요.
리뉴얼 후에는 사이트 제목과 함께 나노 첨단소재와 탄소나노튜브를 설명하는 문구가 나오도록 했어요. 관리자 메뉴에서 페이지별 설명과 검색 키워드를 정리해 두었고, 원문에 따르면 리뉴얼 뒤 탄소나노튜브, 이차전지플랜트, 다이노밀 같은 키워드에서 검색 반영이 확인되었어요. 원문은 네이버와 구글의 웹마스터 도구에 열한 가지 점검 항목이 있고, 이를 지킬수록 자연 검색에서 앞에 설 가능성이 높아진다고 설명하고 있어요.
소개글은 왜 읽히지 않았을까요?
기존 회사 소개글을 마우스로 드래그해 보면 글자가 아니라 사진과 글이 합쳐진 그림 한 장이 통째로 끌려왔어요. 이런 걸 통이미지라고 불러요. 사람 눈에는 글로 보여도 검색엔진은 그 안의 글자를 하나도 읽지 못해요.
리뉴얼한 사이트는 소개글을 모두 텍스트로 만들었어요. 같은 문장이라도 텍스트로 되어 있어야 검색에 반영돼요. 확인 방법은 간단해요. 소개 문장을 마우스로 끌어 보세요. 글자만 선택되면 텍스트이고, 그림째 끌려오면 통이미지예요.
오래된 기술은 어떻게 정리했을까요?
기존 페이지 일부는 어도비 플래시 플레이어로 만든 애니메이션을 쓰고 있었어요. 플래시는 지원이 끝난 지 오래라 스마트폰이나 태블릿에서는 아예 보이지 않아요.
디자인 쪽에서도 문제가 있었어요. 사업 영역 페이지는 템플릿에 찍어 낸 듯한 느낌이었고, 좁은 화면에서는 콘텐츠가 사라지거나 글자 위치가 뒤바뀌며 화면이 어그러졌어요.
새 홈페이지는 플래시 없이 애니메이션을 구현했고, 반응형 구조로 다시 만들었어요. 반응형은 태블릿이나 휴대폰처럼 좁은 화면에 맞춰 사이트를 재배치하고 구조를 다시 짜는 걸 말해요. 디자인의 바탕을 탄탄하게 잡으면서 기능도 놓치지 않도록 했어요.
정리하면 기존 사이트에서 바꾼 것은 이래요.
- 검색 결과에 기업 설명이 나오도록 페이지별 제목과 설명을 입력했어요.
- 통이미지 소개글을 텍스트로 바꾸었어요.
- 플래시를 걷어 내고 모든 기기에서 보이는 방식으로 다시 만들었어요.
- 좁은 화면에서 어그러지던 페이지를 반응형으로 다시 짰어요.
상장 기업에게 필요한 페이지는 무엇이었을까요?
상장을 앞둔 만큼 새로운 기능도 넣었어요. 증권 정보를 API로 불러와 홈페이지 안에서 보여 주는 연동형 주가 정보 페이지예요. IR 메뉴 안에 사이트의 색과 톤에 맞춰 디자인하고, 반응형으로 구현해 모바일로 접속한 투자자에게도 신뢰감을 주도록 했어요.
나머지 페이지는 콘텐츠의 성격에 맞는 디자인 그리드를 따로 만들어 정리했어요. 반응형이라 태블릿으로 프레젠테이션을 하거나 휴대폰으로 회사 소개를 보여 줘야 하는 자리에서도 쓰기 좋아요. 제작 과정에서는 진행 상황과 피드백, 유지보수 방법을 동영상 매뉴얼로 만들어 전달해, 담당자가 바뀌어도 관리 방법이 이어지도록 했어요.
이 사례가 다른 기업에게 주는 힌트는 무엇일까요?
같은 원리는 건축사사무소 사례에서도 보여요. 원문에 따르면 가람건축사사무소를 검색하면 1984년에 설립되었다는 설명과 메뉴가 함께 나오는데, 이는 따로 설정하는 기능이 아니라 검색 로직에 맞게 구조를 갖춰야 생기는 결과예요. 원문에서는 덱스터스튜디오, 에이치엘사이언스 같은 상장사 홈페이지도 함께 소개하고 있어요.
상장을 준비하는 회사라면 오늘 회사 이름을 검색해 보세요. 결과에 우리 회사를 설명하는 정확한 문장이 나오는지가 첫 번째 점검이에요. 크로스디자인랩이 기업 홈페이지를 점검할 때도 늘 이 한 줄에서 시작해요. 기업 홈페이지 구성은 홈페이지 제작 안내에서 더 보실 수 있어요.
