상황

수습 기간이 끝난 직후, 프론트엔드 신규 입사자로서 첫 번째로 맡게 된 업무가 보안 기업의 브랜드 사이트 리뉴얼이었습니다. 목표는 'SEO 상위 노출'로 매우 명확했지만, 당시 기준으로 규모가 큰 브랜드 사이트의 SEO를 전반적으로 설계·개선해 본 경험은 없었습니다. 프론트엔드 개발자는 저 혼자였고, 백엔드 개발자도 한 명뿐이라 무리한 도움을 요청하기 어려운 상황이어서 대부분을 스스로 풀어야 했습니다. 기존 브랜드 사이트는 워드프레스로 구축되어 있었고, Lighthouse 점수는 60~70점대에 머물러 있었으며, 회사의 주요 보안 관련 키워드는 검색 결과에 잘 노출되지 않거나 4~5페이지 이후에 위치하는 등 온라인 가시성이 좋지 않은 상태였습니다.

원인 분석

먼저 기존 워드프레스 기반 사이트의 구조와 코드를 분석했습니다. 워드프레스 자체로도 기본적인 메타데이터 설정은 가능하지만, SEO를 체계적으로 최적화하고 유지하기에는 한계가 있었습니다. 십수 년간 여러 사람이 거치며 관리된 탓에 페이지마다 코드 스타일과 구조가 제각각이었고, 사용하지 않는 페이지와 불필요한 코드가 많이 남아 있었습니다. UI 역시 일관성이 부족했고, 클릭 영역이 불편하게 작거나 접근성이 떨어지는 부분도 눈에 띄었습니다. 또한 과도하게 큰 이미지와 영상이 사용되면서, 로딩 속도와 성능 측면에서도 손해를 보고 있는 상태였습니다. 이런 상황을 종합해 봤을 때, 단순히 몇 개의 메타 태그를 추가하는 수준이 아니라, 구조·마크업·에셋 사용 방식 전반을 정리하는 리뉴얼이 필요하다고 판단했습니다.

행동

프레임워크 선택은 비교적 자유로운 상황이었기 때문에, SEO 최적화와 유지보수성을 함께 고려해 Next.js를 선택했습니다. React/Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원해, 검색 엔진이 초기 HTML을 바로 크롤링하기 쉽고, 라우팅 단위로 메타데이터와 OG 태그를 체계적으로 관리할 수 있다는 점에서 SEO에 유리합니다. 또한 페이지·컴포넌트 단위로 구조를 명확히 나누고, 코드 스플리팅을 통해 성능 최적화도 함께 가져갈 수 있었습니다. 리뉴얼 작업을 시작하면서 폴더 구조와 컴포넌트 규칙, 네이밍 컨벤션 등 기본 규칙을 먼저 정리하고, 개발의 편의성보다는 성능과 일관성을 우선하는 방향으로 마크업과 스타일을 작성했습니다. 이미지와 영상에는 가능한 한 적절한 사이즈와 포맷, 대체 텍스트와 메타 정보를 부여했고, 주요 콘텐츠는 시맨틱 태그와 의미 있는 구조로 재배치했습니다. UI 측면에서는 디자이너가 전달한 Figma 시안을 기준으로, 픽셀 단위의 디테일을 놓치지 않으면서도 재사용 가능한 컴포넌트로 정리했습니다. 다만 브랜드의 특성상 고화질 이미지를 포기할 수 없다는 요구가 있어, 일부 에셋에서는 성능 최적화에 100% 이상적이진 못했다는 아쉬움이 남지만, 그 안에서 최대한 균형을 맞추며 작업을 진행했습니다.

결과

리뉴얼 이후 구글 서치 콘솔 기준으로, 2025년 6월(리뉴얼 직전)과 2026년 3월 데이터를 비교했을 때 평균 노출 수는 약 4,200에서 약 22,000으로, 평균 클릭 수는 약 110회에서 약 600회 수준으로 크게 증가했습니다. 이전에는 검색 결과 4~5페이지 이후에나 보이거나 아예 노출되지 않던 주요 보안 관련 키워드들도, 리뉴얼 이후에는 평균 1.6페이지 이내에 노출되는 수준까지 개선되었습니다. 또한 Lighthouse 기준으로 주요 페이지의 평균 점수를 90점 이상으로 끌어올려 성능·접근성 지표 역시 함께 개선했습니다. 이러한 성과 덕분에 브랜드 사이트 리뉴얼 프로젝트는 회사 내부에서도 좋은 사례로 공유되었습니다.

상황

신규 입사 후 일반적인 수습 과제 대신, 오랜 기간 관리자·파트너사·사용자의 소통 창구 역할을 해야 하지만 제대로 사용되지 못하고 있던 Customer Portal을 리뉴얼하는 과제를 맡게 되었습니다. 기존 포털은 각종 버그와 미완성 기능, 미흡한 UI 때문에 실제 운영에서는 사용이 중단된 상태였고, 이 과제의 핵심 목표는 이 포털을 다시 사용할 수 있는 수준으로 마이그레이션하는 것이었습니다.

원인 분석

기존 포털은 순수 HTML, CSS, JavaScript로 작성되어 있었는데 구조가 복잡하게 얽혀 있었고, 코드 스타일과 설계 방식도 일관성이 없었습니다. 더 큰 문제는 이 포털을 단독으로 개발했던 백엔드 개발자가 이미 퇴사한 뒤라, 기획 문서나 상세 스펙이 거의 남아 있지 않았다는 점이었습니다. 팀 내에서도 실제로 이 포털을 사용해 본 사람이 거의 없었기 때문에, 왜 만들어졌는지·어떤 흐름으로 동작해야 하는지에 대한 정보가 매우 부족한 상태였습니다.

행동

우선 정보 수집과 정리부터 시작했습니다. 당시 포털 기획에 참여했던 분을 직접 찾아가, 이 사이트가 왜 필요했고 어떤 역할을 기대하며 기획됐는지, 운영을 통해 달성하고자 했던 목표가 무엇인지 인터뷰하며 내용을 정리했습니다. 특히 관리자·파트너사·사용자 세 가지 권한별로 어떤 화면과 기능을 제공하려 했는지, 실제 업무 흐름은 어떻게 이어지는지에 집중해 요구사항을 재구성했습니다. 이후 개발 단계에서는 권한별로 작업 범위를 명확히 나누어 헷갈리지 않도록 진행했고, 구현 과정에서 새로 발견되는 버그나 개선 포인트는 모두 기록해가며 하나씩 해결했습니다. 게시글, 알림, 제품 부여, 문의, 로그인/회원가입 등 필수 기능을 우선순위에 따라 리뉴얼하고, 최종적으로 새 포털을 기준으로 수습 과제 발표까지 마무리했습니다.

결과

리뉴얼과 수습 과제 발표를 마무리한 뒤, 최단 기간에 분기 우수사원으로 선정되었습니다. 신규 입사 후 처음 맡은 과제이자 처음으로 눈에 보이는 결과를 만든 프로젝트였기 때문에, 개인적으로도 의미가 큰 경험이 되었습니다. 이후 Customer Portal은 실제 업무에 쓰이는 운영 포털로 자리 잡았고, 현재는 사내 제품 이용자 중 약 40% 이상이 이 포털을 통해 제품 신청·문의·운영을 진행하고 있습니다. 남은 사용자들도 점진적으로 포털로 유입시키는 것을 목표로, 지속적인 유지보수와 기능 개선을 이어가고 있습니다.

상황

신규 입사 이후, 회사에서 운영 중이던 여러 개의 서비스 사이트와 파트너 포털들이 모두 제 담당으로 넘어오게 되었습니다. 이 사이트들은 공통적으로 워드프레스로 구축되어 있었고, 서비스마다 역할과 타깃이 달라 사이트 수는 많은데 구조와 스타일은 제각각인 상태였습니다. 처음에는 단순한 유지보수 정도로 생각했지만, 실제로 코드를 들여다보니 한 페이지 안에 모든 마크업이 뒤섞여 있거나, 메인 CSS 한 파일에 모든 스타일이 몰려 있는 등 관리 난이도가 높아진 상태였습니다.

원인 분석

워드프레스를 본격적으로 다뤄본 경험이 없던 터라, 처음에는 테마 구조와 템플릿 계층, 플러그인 동작 방식을 이해하는 데만도 시간이 꽤 걸렸습니다. 각 페이지는 별도의 템플릿이나 블록 단위 구분 없이 하나의 파일에 통째로 작성되어 있었고, CSS 역시 공통/개별 스타일이 뒤섞여 있어 작은 수정에도 영향 범위를 파악하기 어려웠습니다. 그 결과 단순한 텍스트 수정이나 UI 조정에도 '이 코드가 어디에 연결되어 있는지'를 찾는 데 불필요한 시간이 많이 소요되고 있었습니다. 이 상태를 그대로 유지한 채 유지보수만 반복한다면, 시간이 지날수록 품질과 작업 효율이 더 떨어질 수밖에 없다고 판단했습니다.

행동

먼저 사이트별 역할과 핵심 기능을 정리하고, 워드프레스 내에서 재사용 가능한 구조를 만드는 데 집중했습니다. 섹션과 기능 단위로 코드를 나누고, 반복해서 등장하는 레이아웃이나 요소들은 워드프레스의 템플릿 파트, 재사용 블록, 숏코드 등을 활용해 '컴포넌트처럼' 재구성했습니다. 스타일 역시 공통 요소와 페이지/기능별 스타일을 분리해, 필요한 CSS를 묶어서 관리할 수 있도록 구조를 정리했습니다. 이렇게 정리 작업을 먼저 AIONCLOUD 사이트에 적용해 코드와 파일 구조를 다시 잡은 뒤, 같은 패턴을 AIWorks 사이트에도 확장 적용하는 방식으로 진행하고 있습니다. 한편, AIWorks 안에서는 그룹웨어와 SFA 등 여러 기능이 함께 제공되는데, SFA 영역에는 Chart.js를 활용해 AI 기반 매출 추이를 시각화하는 대시보드를 추가했습니다. Chart.js는 워드프레스 환경에서도 비교적 쉽게 연동할 수 있고, 다양한 차트 타입과 애니메이션, 반응형 대응이 잘 되어 있어 데이터 변화를 직관적으로 보여 주기에 적합하다고 판단했습니다.

결과

정리 작업을 마친 AIONCLOUD 사이트의 경우, 수정이 필요할 때 이전처럼 코드 위치를 찾는 데 시간을 낭비하지 않고, 어떤 템플릿과 블록을 건드려야 하는지 명확하게 파악한 뒤 빠르게 대응할 수 있게 되었습니다. AIWorks 역시 점진적으로 같은 패턴으로 정리해 나가면서, 하나의 서비스 안에서 그룹웨어와 SFA 등 다양한 기능을 일관된 UI와 구조로 제공할 수 있는 기반을 마련하고 있습니다. 특히 SFA 영역에 적용한 AI 기반 매출 추이 시각화는 영업 조직에서 실제로 자주 확인하는 지표가 되었고, 자체 개발한 그룹웨어 기능 역시 AIWorks 안에서 자연스럽게 녹아들어 하나의 통합 서비스로 활용되고 있습니다. 그 결과, 여러 개의 워드프레스 사이트와 기능들을 '각각 따로 관리해야 하는 대상'이 아니라, 공통 패턴과 컴포넌트로 묶어 관리 효율을 높인 자산으로 전환할 수 있었습니다.

상황

웹 기반 퀴즈 생성 플랫폼인 QuizGen에서 프론트엔드 개발을 담당했습니다. 사용자가 본인이 정리한 PDF 파일을 업로드하면, 이를 바탕으로 문제를 생성하고 풀 수 있는 서비스였고, 이용자가 '메인 기능을 직관적으로 찾기 어렵다', 'PDF 업로드가 제대로 적용된 건지 헷갈린다'는 피드백을 줄 정도로 초기 버전의 사용자 경험이 좋지 않았습니다.

원인 분석

초기에는 대학에서 배운 Z 패턴 이론을 그대로 적용해 메인 버튼을 배치했지만, 실제 화면에서는 주변에 불필요한 이미지와 기능이 많아 사용자의 시선이 분산되고 있었습니다. 또한 PDF 업로드 완료를 alert로만 알리려다 보니, 이용자에게는 불필요한 클릭을 강요하는 경험이 되고 있었습니다. 이론적으로는 '눈에 잘 띄는 위치'에 요소를 둔 것처럼 보였지만, 실제 사용자 흐름과는 맞지 않는다는 점을 깨닫게 되었습니다.

행동

먼저 메인 기능을 더 직관적으로 보이게 하기 위해, 주변의 장식적인 이미지와 덜 중요한 기능들을 정리하고 핵심 CTA에만 포인트 색상을 주어 화면 중앙에 배치했습니다. Z 패턴이나 F 패턴 같은 이론에만 의존하기보다, 어떤 시선 동선에서도 자연스럽게 메인 기능이 눈에 들어오도록 UI를 재구성했습니다. PDF 업로드 인지는 alert 대신 스낵바 패턴으로 바꿔, 추가 클릭 없이도 업로드 완료를 명확하게 전달하도록 수정했습니다. 이후 Clarity를 도입해 실제 사용자 행동 패턴을 수집·분석하면서, 수정 전후의 클릭 흐름과 이탈 지점을 비교했습니다.

결과

UI 개선과 피드백 방식을 조정한 뒤, 사용자가 메인 기능을 찾기까지 필요한 불필요한 클릭 수는 평균 7회에서 2회 이하로 줄었습니다. 또한 첫 번째 배포에서는 10명 중 1명만이 일주일 내 재방문했지만, 개선 이후에는 53명 중 38명이 일주일 이내에 재방문해 서비스 이탈률을 60% 이상 감소시켰습니다. 처음에는 '서비스를 한 번 배포하는 것'을 목표로 삼았다면, 이후에는 '사용자 50명 확보'와 '이탈률 50% 이하 유지' 같은 목표를 스스로 세우고 달성해 나가며, 한 번 만든 서비스를 계속 개선해 나가는 반복적인 도전이 얼마나 중요한지 체감할 수 있었습니다.