안녕하세요. 대표님들의 꿈을 실현시키는 홈페이지 제작 전문 스튜디오 웹노바입니다😊
이번에는 아임웹 반응형 홈페이지에서 과감한 인터랙션이 가능하다는 것을 보여주는
포트폴리오 사례를 가지고 왔습니다.
먼저 클라이언트가 아주 중요시했던 점은
'고객과 미팅 시 보여줄 수 있는 자사 포트폴리오 형식의 감도 높은 웹사이트'였고,
홈페이지 미감 자체로 혹할 수 있는 작업물 만들고 싶어 하셨어요.
이를 위해 75분의 대면 미팅을 가졌고,
이 이후에도 상당히 긴밀한 소통을 하며 진행했던 프로젝트였습니다.
그 결과, 어떤 결실이 탄생했는지 그 과정은 어땠는지 낱낱이 함께 파보시죠 :)
▼실제 website▼https://studioswwd.imweb.me/
｜기획 보완 사례
먼저 이번 건은 고객께서 이미 세련된 디자인 시안을 직접 준비한 상태였고,
저희는 그것을 웹상에 멋지게 구현해 내는 것이 목표였는데요.
전달받았던 기획안에서
1) 히어로 섹션에 '달리는 사람'의 영상으로 변경,
2) SERVICE 메뉴에 있던 트랙 인터랙션 섹션을 → 메인으로 이동
시키자고 제안을 드렸습니다.
왜냐하면 이 회사는 '페이스메이커' 라는 브랜딩이 되어 있었고,
웹노바는 그 의미와 맞는 "트랙" 애니메이션과 카피 문구가
브랜딩 퍼포먼스를 직관적으로 드러내는 지점 이라고 판단했기 때문이죠.
이렇게 기획안을 변경하게 되면서 웹사이트에 진입하자마자
브랜드의 역동성과 철학을 한눈에 느낄 수 있게 제작할 수 있었습니다.
대신 SERVICE 메뉴에는 오히려 더 명확한 목적,
즉 서비스 소개와 프로세스 컨텐츠를 추가로 제안 드렸고,
결과적으로 전체 흐름이 훨씬 더 자연스럽고 목적 지향적으로 구성되었어요😎
｜UX/UI 보완 포인트
클라이언트가 전달해 주신 디자인은 '와-' 할 정도로 너무 멋졌지만,
아무래도 웹전문 디자이너는 아니셨기에 사용자 중심 구조와 UX에 대한 고려 측면에서는 보완이 필요한 지점도 발견되었습니다.
예를 들어 기획안 파일에는 없는 '뒤로가기 버튼', '닫힘 버튼' 같은 사용자 인터랙션 요소들이 빠져있었는데요,
웹상에서 정보를 탐색하다가 이런 필수 버튼이 없으면,
이용자가 어디로도 이동할 수 없게 됩니다.
이 상태를 '갇힌다'고 표현하죠.
이런 상황에 처하게 되면 이용자는 그 화면에서 어떤 행동도 할 수 없게 되고,
결국 웹사이트를 이탈할 수 밖에 없게 됩니다.
이는 기능적으로도 마케팅 관점에서도 치명적일 수 있어요.
웹노바는 이러한 맥락을 고려해, 실제 사용자 흐름상 꼭 필요한 요소들을 제안 드렸습니다.
전체 톤앤매너를 맞춰 애초에 있었던 것 같은 자연스러움으로 버튼들을 구현하여,
기존 디자인 감각을 해치지 않으면서도 사용성 중심으로 보완하는 식으로 접근했습니다.
｜인터랙션 정밀 조율 제작
이번 프로젝트에서 모든 부분의 모든 것을 신경 썼지만,
홈페이지 전문성을 표현하기 위해 특히 집중한 부분이 있었는데요 :)
메인의 트랙 애니메이션에 들어간 이모지들의 움직임이었어요.
단순한 이모지처럼 보일 수 있지만, 이 이모지들이 트랙 위를 질주하듯
자연스럽고 감각적으로 흐르도록 발현함으로써,
브랜드의 생동감과 추진력을 직관적으로 표현했습니다.
자연스럽고 조화롭게, 정교하게 움직이는 것을 표현하는 것이 포인트였어요.
아임웹 반응형은 커스텀 코딩이 가능하지만 이런 수준의 동적 움직임을 구현하려면
단순한 코드 삽입을 넘어 미세한 디테일 조정과 반복적인 테스트가 필수적입니다.
(누구나 쉽게 할 수 있는 부분은 아니거든요 ^.~)
이 때문에 작은 디테일 하나하나에 집중해 수차례 테스트를 반복하며 마무리 했고,
결국 방문자가 회사의 방향성과 추진력을 감각적으로 체험할 수 있도록 만들어주는 퍼포먼스로 완성되었어요 :)
긴밀하고 진심이 담긴 소통을 동반하는 제작 과정 사례
여기까지 종합마케팅사 홈페이지 제작 사례를 아임웹 반응형으로 어떻게 구현했는지 살펴보았어요.
결과적으로 클라이언트가 원하셨던 자사 포트폴리오 형식의 반응형 웹사이트를 제작할 수 있어서 저희도 흡족하며 많은 것을 배웠던 프로젝트였습니다.
이러한 케이스에는 복잡한 코딩이 많이 들어가기 때문에 아임웹 오류로 원본 코드가 삭제되는 경우를 대비해 코드 데이터도 꼭 백업 해놓아야 한답니다 :)
웹노바는 앞으로도 홈페이지 제작 전문가로서 최선의 방향으로 프로젝트를 이끌어갈 것을 다짐하며 또 다음 컨텐츠에서 만나 뵙겠습니다 :)
읽어주셔서 감사합니다.
—Webnova
안녕하세요. 대표님들의 꿈을 실현시키는 홈페이지 제작 전문 스튜디오 웹노바입니다😊
이번에는 아임웹 반응형 홈페이지에서 과감한 인터랙션이 가능하다는 것을 보여주는
포트폴리오 사례를 가지고 왔습니다.
먼저 클라이언트가 아주 중요시했던 점은
'고객과 미팅 시 보여줄 수 있는 자사 포트폴리오 형식의 감도 높은 웹사이트'였고,
홈페이지 미감 자체로 혹할 수 있는 작업물 만들고 싶어 하셨어요.
이를 위해 75분의 대면 미팅을 가졌고,
이 이후에도 상당히 긴밀한 소통을 하며 진행했던 프로젝트였습니다.
그 결과, 어떤 결실이 탄생했는지 그 과정은 어땠는지 낱낱이 함께 파보시죠 :)
▼실제 website▼https://studioswwd.imweb.me/
｜기획 보완 사례
먼저 이번 건은 고객께서 이미 세련된 디자인 시안을 직접 준비한 상태였고,
저희는 그것을 웹상에 멋지게 구현해 내는 것이 목표였는데요.
전달받았던 기획안에서
1) 히어로 섹션에 '달리는 사람'의 영상으로 변경,
2) SERVICE 메뉴에 있던 트랙 인터랙션 섹션을 → 메인으로 이동
시키자고 제안을 드렸습니다.
왜냐하면 이 회사는 '페이스메이커' 라는 브랜딩이 되어 있었고,
웹노바는 그 의미와 맞는 "트랙" 애니메이션과 카피 문구가
브랜딩 퍼포먼스를 직관적으로 드러내는 지점 이라고 판단했기 때문이죠.
이렇게 기획안을 변경하게 되면서 웹사이트에 진입하자마자
브랜드의 역동성과 철학을 한눈에 느낄 수 있게 제작할 수 있었습니다.
대신 SERVICE 메뉴에는 오히려 더 명확한 목적,
즉 서비스 소개와 프로세스 컨텐츠를 추가로 제안 드렸고,
결과적으로 전체 흐름이 훨씬 더 자연스럽고 목적 지향적으로 구성되었어요😎
｜UX/UI 보완 포인트
클라이언트가 전달해 주신 디자인은 '와-' 할 정도로 너무 멋졌지만,
아무래도 웹전문 디자이너는 아니셨기에 사용자 중심 구조와 UX에 대한 고려 측면에서는 보완이 필요한 지점도 발견되었습니다.
예를 들어 기획안 파일에는 없는 '뒤로가기 버튼', '닫힘 버튼' 같은 사용자 인터랙션 요소들이 빠져있었는데요,
웹상에서 정보를 탐색하다가 이런 필수 버튼이 없으면,
이용자가 어디로도 이동할 수 없게 됩니다.
이 상태를 '갇힌다'고 표현하죠.
이런 상황에 처하게 되면 이용자는 그 화면에서 어떤 행동도 할 수 없게 되고,
결국 웹사이트를 이탈할 수 밖에 없게 됩니다.
이는 기능적으로도 마케팅 관점에서도 치명적일 수 있어요.
웹노바는 이러한 맥락을 고려해, 실제 사용자 흐름상 꼭 필요한 요소들을 제안 드렸습니다.
전체 톤앤매너를 맞춰 애초에 있었던 것 같은 자연스러움으로 버튼들을 구현하여,
기존 디자인 감각을 해치지 않으면서도 사용성 중심으로 보완하는 식으로 접근했습니다.
｜인터랙션 정밀 조율 제작
이번 프로젝트에서 모든 부분의 모든 것을 신경 썼지만,
홈페이지 전문성을 표현하기 위해 특히 집중한 부분이 있었는데요 :)
메인의 트랙 애니메이션에 들어간 이모지들의 움직임이었어요.
단순한 이모지처럼 보일 수 있지만, 이 이모지들이 트랙 위를 질주하듯
자연스럽고 감각적으로 흐르도록 발현함으로써,
브랜드의 생동감과 추진력을 직관적으로 표현했습니다.
자연스럽고 조화롭게, 정교하게 움직이는 것을 표현하는 것이 포인트였어요.
아임웹 반응형은 커스텀 코딩이 가능하지만 이런 수준의 동적 움직임을 구현하려면
단순한 코드 삽입을 넘어 미세한 디테일 조정과 반복적인 테스트가 필수적입니다.
(누구나 쉽게 할 수 있는 부분은 아니거든요 ^.~)
이 때문에 작은 디테일 하나하나에 집중해 수차례 테스트를 반복하며 마무리 했고,
결국 방문자가 회사의 방향성과 추진력을 감각적으로 체험할 수 있도록 만들어주는 퍼포먼스로 완성되었어요 :)
여기까지 종합마케팅사 홈페이지 제작 사례를 아임웹 반응형으로 어떻게 구현했는지 살펴보았어요.
결과적으로 클라이언트가 원하셨던 자사 포트폴리오 형식의 반응형 웹사이트를 제작할 수 있어서 저희도 흡족하며 많은 것을 배웠던 프로젝트였습니다.
이러한 케이스에는 복잡한 코딩이 많이 들어가기 때문에 아임웹 오류로 원본 코드가 삭제되는 경우를 대비해 코드 데이터도 꼭 백업 해놓아야 한답니다 :)
웹노바는 앞으로도 홈페이지 제작 전문가로서 최선의 방향으로 프로젝트를 이끌어갈 것을 다짐하며 또 다음 컨텐츠에서 만나 뵙겠습니다 :)
읽어주셔서 감사합니다.
—Webnova