[싹틔움] 10/25 개발일지 이미지 업데이트 구현 방식 고민

📚 [배경]

 

회원정보 수정 페이지에서 프로필 이미지 변경이 필요했습니다. 기존에는 회원정보 수정 시, 프로필 이미지, 사용자 이름, 비밀번호 등이 동시에 업데이트되어서 데이터베이스에 저장되었습니다. 하지만, 사용자 경험을 개선하고자, 프로필 이미지 변경 작업을 다른 요청으로 나누고, 데이터베이스 저장을 최종 수정 단계에서 한 번에 처리하는 방식으로 개선하려 합니다. 

 

🌱 [요구사항]

 

프로필 이미지 변경 요청 시, 즉시 데이터베이스에 반영하지 않고, 회원정보 수정 페이지에 이미지 URL 을 반환해 사용자에게 변경 사항을 시각적으로 확인할 수 있도록 했습니다. 이후 회원정보 수정 페이지의 저장 버튼을 눌러야만 사용자가 변경한 데이터인 이름, 이미지 등이 데이터베이스에 반영됩니다. 회원정보 수정 중 프로필 이미지가 변경된 경우에만 새로운 URL 이 업데이트되며, 그렇지 않은 경우에는 기존 URL 을 그대로 유지합니다. 

 

💡 [선택지]

 

1. 이미지 변경과 동시에 데이터베이스에 저장하는 방식입니다. 이는 구현이 단순하고 이미지 URL 을 매번 출력시켜서 사용자에게 보여줄 필요가 없기 때문에 S3 에 저장되는 이미지를 줄일 수 있습니다. 하지만 사용자가 확인을 하지 못하고 이미지가 저장될 수 있다고 판단했고, 결국 그러면 사용자가 다시 이미지를 변경해야하므로 데이터베이스와 S3 에 접근하는 리소스가 필요치 않게 늘 것이라 예상되고 사용자에게도 바람직한 경험을 제공하지 못 할 것이라 예상했습니다.

 

2. 이미지 변경 시 S3 저장 후 이미지 URL 을 통해서 사용자에게 미리보기를 제공하는 방식입니다. 실제 저희 서비스에서도 원형의 틀 안에 사진이 들어가는 방식이기 때문에 미리보기 제공이 필요하다고 판단했습니다. 

 

💡 [의사결정/사유]

프로필 이미지 변경 요청을 별도의 API로 분리하고, 이미지 URL을 S3에 임시 저장한 뒤, 최종 저장 단계에서만 데이터베이스를 업데이트하는 방식을 선택했습니다.

이 방식을 통해 사용자는 프로필 이미지를 변경할 때 즉시 반영 여부를 확인할 수 있으며 최종 확인 후 데이터베이스에 저장하도록 하여 무결성을 높일 수 있습니다.

또한, 불필요한 데이터베이스 요청을 줄여 효율성을 개선할 수 있습니다. 

 

💡 만약 다른 방식으로 개발한다면?

 

프론트엔드가 구현되어있다면 `Data URL` 또는 `Blob URL` 을 통해 S3 에 업로드를 해서 URL 을 생성하지 않더라도 URL 처럼 파일을 다루고 미리보기를 제공하는 방법을 사용할 수 있다고 배웠습니다.

그렇게 미리보기를 제공하고 마지막 최종 저장 단계에서 한 번에 S3 업로드와 데이터베이스 저장을 하는 방법을 선택해볼 수 있을 것입니다.

이 방법을 사용한다면 기존 선택한 방식으로 데이터베이스 접근을 최소화 시킨 것 뿐만 아니라 S3 업로드 역시 필요한 순간에만 진행할 수 있어서 저의 선택지의 단점 요소를 모두 해결할 수 있을 것이라 생각됩니다.