Search

디자인팀이 회사소개 사이트를 직접 만들기까지 : 코드 기반 디자인 구현기

URL
생성 일시
2026/04/24 05:06
최종 편집 일시
2026/04/24 05:06
태그
잡코리아
파일과 미디어
|| WORXPHERE 웹 콘텐츠나 페이지를 제작하다 보면 작은 수정 하나에도 생각보다 많은 단계가 필요합니다. 디자인 수정이 발생하면 개발 요청을 거쳐야 하고, 다시 배포 과정까지 이어지다 보니 작은 수정에도 반복적인 비용과 시간이 발생하는 구조였습니다. 이런 경험이 반복되면서 웹 콘텐츠 영역만큼은 조금 더 빠르고 유연한 방식으로 제작할 수 없을까 하는 고민을 하던 중 마침 노코드 툴들이 빠르게 발전하고 있었고, 이를 활용하면 디자인팀이 직접 페이지를 제작하고 운영할 수 있을지도 모른다는 생각이 들었습니다. 먼저 콘텐츠를 노코드로 제작해보면서 이러한 한계를 일부 해소할 수 있는 가능성을 확인했고, 이를 계기로 회사소개 사이트의 디자인부터 퍼블리싱, 배포까지 디자인팀이 직접 운영하는 제작 방식을 시도하게 되었습니다. 왜 회사소개 사이트였을까 콘텐츠 페이지 제작 경험을 통해 확인한 것은 노코드 기반 제작이 단순 캠페인 랜딩을 넘어 더 넓은 영역에 적용 가능하다는 점이었습니다. 특히 회사소개 사이트는 다음과 같은 특성을 가지고 있어 디자인 중심 제작 방식과 잘 맞는 영역이었습니다. 업데이트 주기가 비교적 명확함 메시지 중심 구조 콘텐츠 구조 설계가 중요 빠른 수정 대응 필요 Framer를 선택한 이유 여러 툴을 비교하면서 단순 제작 가능 여부보다 운영 안정성과 유지보수 가능성, 확장성을 기준으로 평가했습니다. 결론적으로 Framer가 실무 운영에 가장 균형 잡힌 툴이라고 판단했습니다. 디자인 설계 과정1. 서비스 맥락을 먼저 이해할 수 있는 메시지 중심 구조 회사소개 사이트를 구성할 때 사용자가 이 회사가 무엇을 하는 곳인지 빠르게 이해할 수 있도록 하는 것에 초점을 두어, 브랜드 이미지를 먼저 보여주기보다는 서비스의 맥락을 먼저 이해할 수 있는 메시지 구조를 중심으로 내용을 정리했습니다. 특히 다음 세 가지 요소가 자연스럽게 전달되어 서비스의 맥락을 빠르게 이해할 수 있도록 메시지 구조를 구성했습니다. 서비스 정체성을 한 문장으로 전달하는 메시지 서비스가 다루는 영역 어떤 문제를 해결하려는 서비스인지 2. 정보 위계 설계 — 콘텐츠 구조는 “이해 순서”로 설계 회사소개 사이트는 보통 회사 소개, 사업 영역, 조직 순으로 구성되는 경우가 많지만, 페이지를 구성하면서 정보를 전달하는 순서를 다시 고민해 보게 되었습니다. 사용자 입장에서는 먼저 이 회사가 무엇을 하는지, 어떤 문제를 해결하려는 서비스인지, 그리고 그 서비스를 어떤 팀이 만들고 있는지를 순서대로 이해하게 되는 흐름이 더 자연스럽다고 느껴졌습니다. 그래서 구조를 회사 중심의 정보 나열 방식보다는, 사용자가 자연스럽게 이해할 수 있는 아래와 같은 흐름을 기준으로 정보 위계를 설계했습니다. 기업 정체성 서비스 구조 플랫폼 가치 및 기능 조직 구성 또한 사이트를 구성하는 과정에서 기존 회사소개 페이지에는 없었던 기술 메뉴 구성이나 서비스 분류 체계를 함께 정리했습니다. 회사가 어떤 방향으로 서비스를 만들고 있는지, 여러 서비스들이 어떤 구조 안에서 연결되어 있는지를 보여줄 필요가 있다고 생각했기 때문입니다. 이를 위해 서비스들을 기능과 역할 기준으로 다시 분류하고, 사이트 내에서 자연스럽게 탐색할 수 있도록 서비스 구조와 기술 영역에 대한 콘텐츠도 새롭게 정리해 페이지에 반영했습니다. 이 과정은 단순히 페이지를 구성하는 작업이라기보다는, 회사의 서비스 구조와 방향성을 사이트 안에서 어떻게 보여줄 것인지에 대한 정보 구조를 정리하는 과정이기도 했습니다. 3. 시선 동선 설계 — 스크롤 흐름을 기준으로 구조 설계 기존 웹 콘텐츠 분석에서도 확인된 것처럼 평균 스크롤 깊이는 약 68% 수준으로 사용자는 페이지 전체를 끝까지 읽기보다는 중간 구간에서 이탈하는 경우가 많습니다. 이러한 사용자 행동을 고려해 스크롤 흐름을 기준으로 사용자가 정보를 읽는 과정이 관심 유도, 이해 강화, 신뢰 형성의 순서로 자연스럽게 이어지도록 다음과 같은 방식으로 콘텐츠 구조를 정리했습니다. 중요한 메시지 및 CTA 상단에 배치 섹션마다 하나의 메시