프로젝트명
Response Advertising 웹 리뉴얼 프로젝트
제작기간
2024.04.25 - 2024.05.31
개발스택
Typescript | Next.JS
프로젝트 소개
광고회사의 리브랜딩 프로젝트 중 웹사이트 리뉴얼 프로젝트를 맡아 진행하게 되었습니다. 기존의 PHP 기반 웹사이트를 Next.js 14 기반 웹사이트로 재구축하고 광고회사 특성을 살려 UI/UX도 추가적으로 고려하여 첫 메인페이지를 인터렉티브한 UI로 강조했습니다. 또한 검색 노출을 높이기위해 검색 엔진 최적화(SEO) 작업을 통해 더 많은 사용자 유입을 유도하였고 반응형 디자인을 통해 다양한 디바이스에서 최적화된 사용자 경험을 제공하였습니다.
그 외에도 서비스 중단 없이 프로젝트를 진행하기 위해 WordPress로 임시 사이트를 만들어 배포했고 개발 완료 후에는 도메인 네임서버와 DNS 레코드 설정을 통해 기존 SEO 가치를 유지하면서 성공적으로 마이그레이션을 완료했습니다.
개발 인원
디자이너 1명, 프론트엔드 1명(me)
목표
1.
새로운 브랜드 아이덴티티 구현: 광고회사의 아이덴티티를 잘 나타내는 웹사이트 디자인 및 기능 구현.
2.
사용자 경험 향상: 반응형 웹사이트 개발로 다양한 디바이스에서 일관된 사용자 경험 제공.
3.
웹사이트 성능 최적화: Next.js 14의 성능을 활용하여 웹사이트 로딩 속도 향상.
주요 특징
•
PHP 기반 사이트를 Next.js로 마이그레이션하여 성능 및 사용자 경험 개선
•
인터랙티브한 메인 페이지 구현으로 광고회사의 창의적 아이덴티티 강조
•
WordPress를 사용해서 임시 사이트를 만들어 서비스 중단 없이 배포 진행
•
DNS 레코드 및 네임서버 설정을 통한 기존 SEO 가치 보존
프로젝트 담당
전체 시스템 설계 및 구현:
Next.js 기반의 아키텍처를 사용해서 기존 PHP 사이트의 콘텐츠를 재설계했습니다. 개발 시작에 앞서 기존 데이터는 FTP 서버에 백업을 해두고 리뉴얼 중에도 서비스를 이어가기 위해 WordPress로 임시 사이트를 만들어 동일 도메인으로 연결해 운영했습니다.
프론트엔드:
회사의 아이덴티티를 강조하기 위해 인터렉티브한 메인 페이지를 구현하였습니다. 변화하고 성장하는 이미지를 전달하기 위해 움직이는 그라데이션 효과를 적용하였으며 커서가 움직일 때 그라데이션도 함께 반응하도록 하여 사용자 경험을 향상시켰습니다.
배포 및 운영:
개발이 끝난 후에는 Vercel을 통해 Next.js 페이지를 배포하고 Rebel 플랫폼에서 도메인 설정 및 DNS 레코드를 관리했습니다. 네임서버를 업데이트하고 Google Workspace DNS 레코드 동기화를 진행하여 회사 이메일 시스템도 원활히 유지되도록 했습니다.
프로젝트 회고
What 무엇을 했나요?
•
전달받은 디자인 시안에서 추가적으로 아이디어를 내서 정적 화면이 동적으로 보이도록 마우스 커서 이벤트를 추가했습니다.
•
프로젝트를 통해 DNS 설정과 도메인 호스팅을 실무에 적용시켜보았고 특히 네임서버 관리와 Google Workspace 연동에 관한 구체적인 경험을 쌓았습니다.
How 어떻게 해결했나요?
•
기존 PHP 페이지는 외주업체에서 제작되어 인하우스 관리가 어려웠는데 이번 프로젝트를 진행하며 팀 repository를 만들어 로컬에서 직접 관리할 수 있도록 변경했습니다.
•
도메인 설정 중 Google Workspace DNS 연동이 되지않아 구글 비즈니스 계정이 비활성화되는 이슈가 있었는데 DNS 레코드 프리셋을 업데이트 함으로써 빠르게 복구할 수 있었습니다.
Then 앞으로의 개선점?
•
포트폴리오 형식의 정보 전달식 홈페이지여서 Vanilla JS만으로도 개발을 할 수 있었지만 향후 확장성과 더 풍부한 인터랙션을 위해 Next.js 프레임워크를 선택했습니다. 이후에 사용자 맞춤형 콘텐츠를 제공하는 방향으로 발전시킬 수 있을 것 같습니다.
트러블 슈팅
문제: 도메인 마이그레이션 과정에서 Google Workspace MX 레코드 설정 오류로 이메일 수신 중단
해결: 워드프레스 임시 사이트를 도메인에 연결하는 과정에서 웹사이트 위치를 가리키는 네임서버만 변경하고 이메일 전달 경로를 지정하는 Google Workspace MX 레코드는 업데이트하지 않아 시스템 간 충돌이 발생했습니다. 이로 인해 회사 이메일 계정이 일시적으로 비활성화되는 이슈가 생겼는데 호스팅 관리자 페이지에서 Google Workspace의 MX 레코드를 올바른 우선순위로 업데이트함으로써 신속하게 문제를 해결했습니다.
프로젝트 Preview
리뉴얼 전 웹사이트 보기 (php 기반)
