목표

인포크링크를 활용하는 다양한 유저들의 이미지를 확인할 수 있는 갤러리 페이지의 자동화를 목표로 합니다.

상세

1. 문제 파악

기존 인포크링크 갤러리의 관리 방법은 다음과 같습니다. 유저 탐색 및 선정 → 유저 페이지 이미지 캡처 → 이미지를 S3에 업로드 → 업로드된 이미지 주소를 스프레드시트에 추가 → 스프레드시트와 연결된 함수를 호출해 이미지 렌더링

서비스 특성상 유저 페이지의 이미지는 지속해서 업데이트되는 반면, 관리자는 위의 과정으로 이미지를 관리하는 데 있어 자동화에 대한 팀원들의 요구가 꾸준히 있었습니다. 이를 해결하기 위해 주도적으로 진행한 프로젝트입니다.

2. 기술 스택 선정

기술 스택 선정의 배경이 된 요구사항은 다음과 같습니다.

• 이미지로 나타낼 유저 목록은 개발자가 아닌 인원도 수정하고 확인할 수 있어야 합니다.
• 유저 이미지는 매일 자동으로 갱신되어야 합니다.
• 유저 이미지가 많아도 사용자에게 나쁜 UX를 제공하지 않아야 합니다.

유저 목록을 간편하게 관리할 수 있도록 스프레드시트를 활용했습니다.

이미지의 자동 갱신을 위해 AWS Lambda와 Event Bridge를 활용했습니다. AWS Lambda는 serverlss 환경에서 작동하며, Event Bridge를 활용해 원하는 시간에 Lmabda가 작동하도록 할 수 있습니다. 또한, Lambda와 연결된 API Gateway를 활용해 요청에 대한 응답에 캐시르 적용하고 조절할 수 있습니다.

3. 자동화 개발

아래 두 과정은 AWS CDK를 활용해 구현했으며, 이를 통해 개발자 누구나 쉽게 관리할 수 있는 아키텍처를 완성했습니다.

3-1. 이미지 업데이트

유저 페이지를 자동으로 캡처하고 이미지 파일로 저장하기 위한 Lambda 함수를 구현했습니다.

스프레드시트에 저장된 유저 목록을 호출한 뒤, 각 유저 페이지에 접속해 캡처 후 S3에 이미지 파일을 저장합니다.

갱신되는 유저 페이지를 업데이트하기 위해 Event Bridge를 활용해 트래픽이 제일 적은 매일 새벽 4시에 유저들의 이미지를 자동으로 캡처 후 저장합니다.

3-2. 이미지 호출

S3에 저장된 유저 이미지 목록을 반환하며, 애플리케이션에서 이미지를 렌더링하기 위한 Lambda 함수를 구현했습니다.

페이지 접속 시마다 이미지를 받아오지 않도록, API Gateway를 활용해 1일에 해당하는 캐시를 적용했습니다. 이를 통해 이미지의 개수와 무관하게 사용자에게 우수한 UX를 제공합니다.

결론

• 팀 전체의 업무 효율을 향상시킬 수 있는 자동화된 아키텍처를 주도적으로 설계하고 개발했습니다.
• 적절한 기술 스택을 활용해 프로젝트의 요구 사항을 만족했습니다.
• 코드를 기반으로 한 아키텍처를 완성해 팀 내 개발자 누구나 쉽게 관리할 수 있는 구조를 구축했습니다.
• 갤러리 페이지의 LCP를 약 80% (2s → 0.4s) 개선했습니다.