준비된사람들의 이야기

따뜻함을 만듭니다

자세히보기

프론트엔드 4

홈페이지 리뉴얼 ep.4 – 서비스 알아보기 페이지에서 회사 소개 페이지로 구조 전환

이번에는 서비스 알아보기 페이지를회사 소개 페이지로 구조 전환한 내용에 대해 이야기해보려고 합니다.1. 왜 서비스 알아보기 페이지를 바꾸었는가기존 웹사이트에는 ‘서비스 알아보기’ 페이지가 존재했습니다.이 페이지는 서비스에 대한 내용을 소개하기 위해 만들어졌으며,서비스 요금이나 앱 사용 방법 등에 대한 정보가 포함되어 있었습니다. 하지만 리뉴얼을 진행하며 서비스에 대한 핵심 설명은메인 페이지에서 전달하는 것이 더 적절하다고 판단했습니다.실제로 메인 페이지에서 서비스의 주요 내용과 이용 흐름을 충분히 설명하도록 구조를 변경하면서,기존 ‘서비스 알아보기’ 페이지에는 서비스에 대해 새롭게 전달할 내용이 거의 남지 않게 되었습니다. 또한 페이지 곳곳에는 사용자에게 의미 있는 정보를 전달하지 못하는 dead zon..

홈페이지 리뉴얼 ep.3 - Main 페이지 구성 개편(2)

4. ServiceFlowSectionServiceFlowSection은 사용자가 실제로 서비스를 이용할 때어떤 과정으로 진행되는지를 단계별로 보여주는 영역입니다.서비스 이용 과정에 대한 문의가 자주 있었기 때문에페이지 안에서 서비스 신청부터 이용 완료까지의 흐름을한눈에 이해할 수 있도록 절차를 정리하여 구성했습니다. 또한 스크롤 진입 시 각 단계 카드가 순차적으로 등장하도록 애니메이션을 적용했습니다.이 애니메이션은 CSS만으로 동작하는 것이 아니라IntersectionObserver를 활용해 섹션이 화면에 들어왔을 때 애니메이션 클래스를 활성화하는 방식으로 구현했습니다.초기에는 카드가 보이지 않는 상태로 시작하고,섹션이 화면에 일정 비율 이상 나타나면 애니메이션이 실행되도록 구성했습니다..flowIt..

홈페이지 리뉴얼 ep.2 - '문의하기' 페이지

B2C 비즈니스에서 개발자의 중요한 역할 중 하나는고객이 서비스로 들어올 수 있는 통로를 만드는 것이라고 생각합니다.그중에서도 고객이 서비스에 대해 궁금증이 생겼을 때그 궁금증을 빠르게 해결할 수 있도록 만드는 일은 매우 중요합니다.궁금증이 생겼다는 것 자체가 이미 서비스에 대한 인지가 생겼다는 의미이기 때문입니다.그 과정에서 이용을 가로막는 작은 장애물들을 해결해 준다면그 고객은 서비스를 이용할 가능성이 가장 높은 후보가 될 수 있습니다.하지만 기존 문의하기 페이지는필요한 정보를 찾거나 문의를 남기기까지의 흐름이조금 매끄럽지 않다고 느껴졌습니다.특히FAQ 영역의 가독성이 떨어진다는 점문의 작성 시 입력 경험이 직관적이지 않다는 점이 두 가지가 주요 문제였습니다.그래서 이번 리뉴얼에서는 문의하기 페이지의..

홈페이지 리뉴얼 ep.0 - 대공사의 목적

안녕하세요.준비된사람들의 개발자 YOUNG입니다.이번에 소개드릴 내용은'홈페이지 리뉴얼'에 대한 이야기입니다. 2026년이 시작되고홈페이지 리뉴얼에 대한 이야기가 나오기 시작했습니다.기능을 새로 추가하는 것이 아니라UI/UX를 전면적으로 다시 설계해보자는 이야기였습니다.이유는 단순했습니다.사용자가 얻고자 하는 정보가 보이지 않는다.라고 판단했기 때문입니다.가장 큰 문제는서비스 신청 과정이 보이지 않는다는 점이었습니다.로그인을 해야만 '신청하기' 버튼이 나타나는 구조였기 때문에처음 방문한 고객은 어떻게 서비스를 신청해야 하는지 알 방법이 없었습니다. 홈페이지의 개편 방향성을 살펴보며 고객들이 또 이런 질문들도 생길 수 있다고 생각했습니다.이 서비스는 실제로 운영되고 있는 서비스인가?어떤 서비스를 제공하는 ..