NEWS
홈페이지 리뉴얼의 완성도를 만든 1px의 차이
- 인사이트 2026.05.06.
디자인의 의도를 사용자가 느끼는 웹 경험으로 옮긴 플랜아이 홈페이지 리뉴얼 퍼블리싱 비하인드
"이 애니메이션, 웹에서 구현 가능할까요?"
디렉터님의 질문에 "네, 안되는 건 없어요!"라고 답했지만, 머릿속에서는 수많은 CSS 속성과 스크립트들이 빠르게 스쳐 지나갔습니다. 어떤 방식으로 움직임을 구현할지, 모바일에서도 같은 흐름이 유지될지, 사용자가 어색함 없이 받아들일 수 있을지를 동시에 떠올려야 했습니다.
이번 플랜아이 홈페이지 리뉴얼에서 퍼블리싱을 맡으며 스스로 세운 목표는 분명했습니다. 디자인의 의도를 브라우저 안에서 최대한 정확하게 구현하는 것. 단순히 보이는 화면을 옮기는 것이 아니라, 사용자가 실제로 느끼는 경험까지 온전히 전달하는 것이었습니다.
이번 홈페이지 리뉴얼의 목표는 플랜아이가 지향하는 '통합 AX 파트너'의 이미지를 더 선명하게 보여주는 것이었어요. 사용자가 플랜아이의 서비스와 솔루션을 더 쉽게 이해하고, 필요한 정보에 자연스럽게 도달할 수 있도록 화면의 흐름과 구조를 함께 정비했습니다.
퍼블리싱은 이 방향을 실제 웹 경험으로 옮기는 과정이었습니다. 디자인의 의도를 사용자가 느끼는 경험으로 구현하기 위해, 1px의 차이와 인터랙션의 흐름까지 세밀하게 살폈습니다.
처음 맞춰본 호흡, 디테일로 완성한 협업
같은 부서가 아닌 디자이너와 협업하는 것도, 디렉터님과 함께 작업하는 것도 이번이 처음이었기에 긴장감이 컸는데요. 실제 작업에 들어가니 걱정은 금세 줄었습니다. 오히려 디자인이 상세하게 정리되어 있어 퍼블리싱 과정에서 기준을 명확하게 잡을 수 있었고, 구현에 더 집중할 수 있었습니다.
무엇보다 인상 깊었던 것은 디렉터님의 세밀한 작업 기준이었어요. 글자 크기나 여백이 조금만 어긋나도 바로 알아차리는 모습이 인상적이었습니다. 미세한 차이를 그냥 넘기지 않는 워크에식에서, 익숙하게 처리해왔던 부분들도 다시 보게 됐습니다.
가장 기억에 남는 것은 오픈을 앞두고 진행한 최종점검입니다. 디렉터님과 함께 PC와 모바일 화면을 나란히 띄어놓고 모든 페이지를 확인하는 작업이었는데요. 글자 크기, 간격, 반응형 흐름, 인터랙션이 디자인 의도대로 구현됐는지 하나씩 살폈습니다.
3~4시간 동안 화면이 뚫릴 듯 들여다보는 것은 쉽지 않았습니다. 막바지에는 둘 다 화면에서 눈을 떼기 어려울 만큼 집중한 시간이었죠. 힘든 과정이었지만, 그 시간이 홈페이지의 완성도를 높이는 데 꼭 필요한 과정이었다고 생각합니다. 작은 차이를 맞추는 시간이 쌓여, 사용자가 느끼는 웹 경험의 안정감으로 이어졌기 때문입니다.
웹 경험을 완성한 4가지 구현 포인트
인터랙션은 심플하게 하되, 작은 차이는 그냥 넘기지 않으려 했습니다. 부서 소개와 솔루션 소개처럼 중요도가 높은 페이지는 오픈 이우헤도 텍스트 하나, 간격 하나를 계속 다듬었습니다. 완성도를 한번에 끝내는 것이 아니라, 실제 화면을 보며 계속 조정해가는 과정이었습니다.
1. 메인 비주얼 인터랙션 설계
메인 비주얼은 사용자가 홈페이지에 들어왔을 때 가장 먼저 마주하는 영역이에요. 이번 리뉴얼에서는 과한 애니메이션보다 사용자의 시선을 자연스럽게 이끄는 흐름에 집중했습니다.
"심플하지만 지루하지 않게"라는 방향 아래, 브랜드 이미지와 사용성 사이의 균형을 맞추고자 했습니다. 보여주기 위한 인터랙션이 아니라, 사용자가 화면의 흐름을 자연스럽게 따라갈 수 있는 인터랙션을 목표로 여러 차례 방향을 조율했습니다.
2. 디자인 시스템의 코드화
피그마에 정의된 간격, 타이포그래피, 그리드 시스템을 코드로 옮기는 작업도 중요했습니다. 눈대중으로 맞추는 것이 아니라, 어떤 해상도와 환경에서도 일관된 레이아웃이 유지되도록 구조를 설계했습니다.
1px 단위의 차이는 작아 보일 수 있습니다. 그러나 이런 차이가 쌓이면 전체 화면의 완성도와 브랜드 인상이 달라집니다.
3. 모바일을 먼저 생각한 반응형 설계
반응형 작업은 PC 화면을 단순히 줄이는 방식으로는 충분하지 않습니다. 사용자가 모바일에서 콘텐츠를 읽는 흐름, 손가락으로 조작하는 터치 영역, 화면 전환의 자연스러움까지 함께 고려해야 합니다.
이번 프로젝트에서는 HTML 구조를 설계하는 단계에서부터 모바일 환경을 함께 고려했습니다. 같은 콘텐츠라도 어떤 디바이스에서 보느냐에 따라 경험이 달라지기 때문에, 모바일에서도 정보의 흐름이 끊기지 않도록 구조를 잡았습니다.
4. 플래니 적용 및 커스텀화
회사의 AI 대화형 웹사이트 솔루션 '플래니'를 대표 홈페이지에 적용하는 작업도 이번 프로젝트의 중요한 부분이었습니다. 단순히 기능을 삽입하는 것이 아니라, 홈페이지의 디자인과 자연스럽게 어우러지도록 화면 구조와 사용 흐름에 맞춰 조정했는데요. 버튼 위치, 노출 방식, 화면 안에서의 존재감까지 꼼꼼히 챙기며 사용자가 이질감 없이 플래니를 발견하고 활용할 수 있도록 한 것이 특징입니다.
화면을 넘어 구조를 설계하는 일
이번 작업을 통해 퍼블리셔는 단순히 화면을 재현하는 사람이 아니라, 화면 뒤의 구조를 설계해 사용자의 경험을 결정하는 사람임을 다시 확인했습니다. 새로운 직무명인 'UI Developer'인 이유를 제대로 이해한 시간이었죠.
디자인이 브랜드가 보여주고 싶은 방향을 그린다면, 퍼블리싱은 그 방향을 사용자가 실제로 느낄 있는 웹 경험으로 완성합니다. 코드는 사용자의 눈에 직접 보이지 않지만, 안정적인 레이아웃, 부드러운 인터랙션, 다양한 디바이스에서 이어지는 일관된 흐름 안에 그 역할이 담겨 있다고 생각합니다.
리뉴얼된 플랜아이의 대표 홈페이지의 완성도 역시 이런 작은 구현의 축적으로 만들어졌습니다. 앞으로도 디자인의 의도와 사용자의 경험 사이를 세밀하게 연결하며, 플랜아이다운 디지털 경험을 만들어가겠습니다.
#홈페이지_리뉴얼 #웹퍼블리싱 #프론트엔드 #UXUI #반응형웹 #인터랙션디자인 #디지털경험 #플랜아이
작성: DX사업부 디자인그룹 UI Developer팀 남다연 UD
편집: 리추얼팀 김현정 매니저
"이 애니메이션, 웹에서 구현 가능할까요?"
디렉터님의 질문에 "네, 안되는 건 없어요!"라고 답했지만, 머릿속에서는 수많은 CSS 속성과 스크립트들이 빠르게 스쳐 지나갔습니다. 어떤 방식으로 움직임을 구현할지, 모바일에서도 같은 흐름이 유지될지, 사용자가 어색함 없이 받아들일 수 있을지를 동시에 떠올려야 했습니다.
이번 플랜아이 홈페이지 리뉴얼에서 퍼블리싱을 맡으며 스스로 세운 목표는 분명했습니다. 디자인의 의도를 브라우저 안에서 최대한 정확하게 구현하는 것. 단순히 보이는 화면을 옮기는 것이 아니라, 사용자가 실제로 느끼는 경험까지 온전히 전달하는 것이었습니다.
이번 홈페이지 리뉴얼의 목표는 플랜아이가 지향하는 '통합 AX 파트너'의 이미지를 더 선명하게 보여주는 것이었어요. 사용자가 플랜아이의 서비스와 솔루션을 더 쉽게 이해하고, 필요한 정보에 자연스럽게 도달할 수 있도록 화면의 흐름과 구조를 함께 정비했습니다.
퍼블리싱은 이 방향을 실제 웹 경험으로 옮기는 과정이었습니다. 디자인의 의도를 사용자가 느끼는 경험으로 구현하기 위해, 1px의 차이와 인터랙션의 흐름까지 세밀하게 살폈습니다.
처음 맞춰본 호흡, 디테일로 완성한 협업
같은 부서가 아닌 디자이너와 협업하는 것도, 디렉터님과 함께 작업하는 것도 이번이 처음이었기에 긴장감이 컸는데요. 실제 작업에 들어가니 걱정은 금세 줄었습니다. 오히려 디자인이 상세하게 정리되어 있어 퍼블리싱 과정에서 기준을 명확하게 잡을 수 있었고, 구현에 더 집중할 수 있었습니다.
무엇보다 인상 깊었던 것은 디렉터님의 세밀한 작업 기준이었어요. 글자 크기나 여백이 조금만 어긋나도 바로 알아차리는 모습이 인상적이었습니다. 미세한 차이를 그냥 넘기지 않는 워크에식에서, 익숙하게 처리해왔던 부분들도 다시 보게 됐습니다.
가장 기억에 남는 것은 오픈을 앞두고 진행한 최종점검입니다. 디렉터님과 함께 PC와 모바일 화면을 나란히 띄어놓고 모든 페이지를 확인하는 작업이었는데요. 글자 크기, 간격, 반응형 흐름, 인터랙션이 디자인 의도대로 구현됐는지 하나씩 살폈습니다.
3~4시간 동안 화면이 뚫릴 듯 들여다보는 것은 쉽지 않았습니다. 막바지에는 둘 다 화면에서 눈을 떼기 어려울 만큼 집중한 시간이었죠. 힘든 과정이었지만, 그 시간이 홈페이지의 완성도를 높이는 데 꼭 필요한 과정이었다고 생각합니다. 작은 차이를 맞추는 시간이 쌓여, 사용자가 느끼는 웹 경험의 안정감으로 이어졌기 때문입니다.
웹 경험을 완성한 4가지 구현 포인트
인터랙션은 심플하게 하되, 작은 차이는 그냥 넘기지 않으려 했습니다. 부서 소개와 솔루션 소개처럼 중요도가 높은 페이지는 오픈 이우헤도 텍스트 하나, 간격 하나를 계속 다듬었습니다. 완성도를 한번에 끝내는 것이 아니라, 실제 화면을 보며 계속 조정해가는 과정이었습니다.
1. 메인 비주얼 인터랙션 설계
메인 비주얼은 사용자가 홈페이지에 들어왔을 때 가장 먼저 마주하는 영역이에요. 이번 리뉴얼에서는 과한 애니메이션보다 사용자의 시선을 자연스럽게 이끄는 흐름에 집중했습니다.
"심플하지만 지루하지 않게"라는 방향 아래, 브랜드 이미지와 사용성 사이의 균형을 맞추고자 했습니다. 보여주기 위한 인터랙션이 아니라, 사용자가 화면의 흐름을 자연스럽게 따라갈 수 있는 인터랙션을 목표로 여러 차례 방향을 조율했습니다.
2. 디자인 시스템의 코드화
피그마에 정의된 간격, 타이포그래피, 그리드 시스템을 코드로 옮기는 작업도 중요했습니다. 눈대중으로 맞추는 것이 아니라, 어떤 해상도와 환경에서도 일관된 레이아웃이 유지되도록 구조를 설계했습니다.
1px 단위의 차이는 작아 보일 수 있습니다. 그러나 이런 차이가 쌓이면 전체 화면의 완성도와 브랜드 인상이 달라집니다.
3. 모바일을 먼저 생각한 반응형 설계
반응형 작업은 PC 화면을 단순히 줄이는 방식으로는 충분하지 않습니다. 사용자가 모바일에서 콘텐츠를 읽는 흐름, 손가락으로 조작하는 터치 영역, 화면 전환의 자연스러움까지 함께 고려해야 합니다.
이번 프로젝트에서는 HTML 구조를 설계하는 단계에서부터 모바일 환경을 함께 고려했습니다. 같은 콘텐츠라도 어떤 디바이스에서 보느냐에 따라 경험이 달라지기 때문에, 모바일에서도 정보의 흐름이 끊기지 않도록 구조를 잡았습니다.
4. 플래니 적용 및 커스텀화
회사의 AI 대화형 웹사이트 솔루션 '플래니'를 대표 홈페이지에 적용하는 작업도 이번 프로젝트의 중요한 부분이었습니다. 단순히 기능을 삽입하는 것이 아니라, 홈페이지의 디자인과 자연스럽게 어우러지도록 화면 구조와 사용 흐름에 맞춰 조정했는데요. 버튼 위치, 노출 방식, 화면 안에서의 존재감까지 꼼꼼히 챙기며 사용자가 이질감 없이 플래니를 발견하고 활용할 수 있도록 한 것이 특징입니다.
화면을 넘어 구조를 설계하는 일
이번 작업을 통해 퍼블리셔는 단순히 화면을 재현하는 사람이 아니라, 화면 뒤의 구조를 설계해 사용자의 경험을 결정하는 사람임을 다시 확인했습니다. 새로운 직무명인 'UI Developer'인 이유를 제대로 이해한 시간이었죠.
디자인이 브랜드가 보여주고 싶은 방향을 그린다면, 퍼블리싱은 그 방향을 사용자가 실제로 느낄 있는 웹 경험으로 완성합니다. 코드는 사용자의 눈에 직접 보이지 않지만, 안정적인 레이아웃, 부드러운 인터랙션, 다양한 디바이스에서 이어지는 일관된 흐름 안에 그 역할이 담겨 있다고 생각합니다.
리뉴얼된 플랜아이의 대표 홈페이지의 완성도 역시 이런 작은 구현의 축적으로 만들어졌습니다. 앞으로도 디자인의 의도와 사용자의 경험 사이를 세밀하게 연결하며, 플랜아이다운 디지털 경험을 만들어가겠습니다.
#홈페이지_리뉴얼 #웹퍼블리싱 #프론트엔드 #UXUI #반응형웹 #인터랙션디자인 #디지털경험 #플랜아이
작성: DX사업부 디자인그룹 UI Developer팀 남다연 UD
편집: 리추얼팀 김현정 매니저
