기본 리드미 파일 작성 #5
기본 리드미 파일 작성 #5
Conversation
|
| pnpm dev | ||
| ``` | ||
|
|
||
| ## 🔍 프로젝트 배경 |
README.md
Outdated
| 1. Next.js Image 의 비용 문제 | ||
| sopt makers 의 서버비는 sopt 와 후원사의 지원금으로 운영됩니다. Next.js Image 는 가장 편리하지만, 사용할 수 있는 이미지 리사이징 툴 중 가장 비싼 가격을 책정하고 있었기에 사용에 어려움이 있었습니다. 아울러, Vercel 을 이용하여 배포하는 공식 홈페이지 팀과 달리, 플레이그라운드와 크루 팀은 Cloudflare Pages 를 이용해 배포하고 있었으므로, Node.js 기반의 Next.js Image 를 사용할 수 없었습니다. |
There was a problem hiding this comment.
제가 생각했던 이미지 리사이징 툴의 가장 주요 배경은 Cloudflare Pages의 next/Image 미지원 이라고 생각했어요!
공홈 개발자로서 리사이징 툴의 필요성을 느끼게 된 계기를 한번 정리해드리자면,
- 공홈은 다른 프로덕트들과 달리 Vercel을 통해 배포해서, next/image를 사용하는 데에 문제가 없었음.
- 하지만 Vercel의 무료 플랜은 1) organization 레포지토리 배포 횟수를 제한하고, 2) 지원하는 트래픽이 cloudflare에 비해 매우 한정적임
- 1번 때문에 공홈은 개인이 포크하여 배포하는 방식을 사용하고 있었고, 이로인해 CD 빌드 로그를 살피거나 배포하는게 팀원 한명에게 종속되어있어서 서비스 운영에 불편함이 컸고, 2번은 실제로 공식홈페이지 트래픽이 Vercel 무료플랜 지원 트래픽을 초과해서 서비스가 중단될거라는 경고도 받았음
- 따라서
팀원 모두 관리 가능+충분한 무료 플랜 리소스 지원의 이유로 공홈 배포 환경을 Vercel -> Cloudflare Pages로 이관하는게 맞다고 판단함 - 하지만 공식홈페이지에서는 next/image를 사용하고 있고, Cloudflare Pages는 이 next/image 기능을 지원하지 않아 배포환경 이관을 못하고 있었음
요런 히스토리가 있었어요!
그래서 제가 생각했을 때는 이미지 리사이징 툴이 필요하게된 주 계기는
- 공홈팀 : Vercel 환경 + next/image를 사용하고 있는데, 배포환경을 Vercel에서 Cloudflare Pages로 이관하기 위해 커스텀 로더가 필요함
- 플그/크루팀 : Cloudflare Pages로 배포하기 위해 next/image가 아닌 wsrv.nl을 사용하고 있었으나, 해당 솔루션의 한계 및 지속가능성 때문에 더 안정적인 next/image 컴포넌트를 사용하고자 함 (현수가 2번에서 해준 얘기 그대로!)
이렇게 라고 생각했어요!
There was a problem hiding this comment.
Cloudflare Pages 에서 next/image를 사용하기 위해서는 Cloudflare Images 솔루션을 따라야 했고, 해당 문제가 제기되었던 지난 기수 까지는 해당 솔루션이 무조건 유료 플랜만 이용 가능했기 때문에 사용하지 못했었는데,
몇달 전부터 무료 플랜도 제한된 리소스(월 5천번의 요청) 내에서 사용 가능하도록 변경되어서 저희가 현재와 같은 커스텀 로더를 만들 수 있게 되었다고 생각해요
혹시 현수가 여기서 언급해준 가장 비싼 Next.js Image 툴 -> 이게 Cloudflare Images를 말하는게 맞을까요? 아니라면 혹시 어떤 툴을 말하는건지 궁금해용
There was a problem hiding this comment.
앗 저희는 지난 기수부터, Cloudflare Images 유료 서비스를 구독하고 있지만, 사용은 하지 않고 있었어요! 사실 제일 쉬운 방법은 서버에서 S3에 있는 이미지를 Cloudflare Image 스토리지에 넣어주는 것이었는데, 이 작업이 생각보다 까다롭다고 하시더라구요..! 그리고 지난 기수에는 Worker 를 이용해서 이미지 리사이징을 할 수 있는 기능도 없었기에, 서버에서 이미지를 이관해주시는 것을 기다리는 방법 외에는 방법이 없었었어요.. 그래서 Cloudflare Images 유료 서비스를 구독만 하고 방치하고 있었는데, 그러다 Worker 를 이용해서 클라이언트 측에서 이미지를 리사이징하는 방법이 생겼고, 그 방법을 저희가 지금 채택해 하고 있는 것입니다!
그리고 말씀해주신 것처럼 Cloudflare Images 와 같은 서비스가 없다면, 기본적으로 cloudflare 는 node.js 기반으로 이미지 서버를 만들지 못하므로 불가능하지만, Cloudflare Images 를 이용하면, Next.js Image 태그를 이용할 수 있어요! (참고링크) 그런데도 Next.js Image 태그의 이미지 리사이징 기능 사용을 지양하고자 하는 이유가, Next.js 의 Image 태그의 이미지 리사이징 기능이 cloudflare 의 Images 보다 훨씬 더 높은 비용을 요구한다는 점이었어요. 그래서 궁극적으로는, "비싼 Next.js 의 Image 태그와 무료이지만 불안정한 wsrv.nl을 버리고, 저렴하면서 안정적인 cloudflare 의 Images 를 사용해 이미지 리사이징을 하자!" 가 저희 TF 의 목표였기 때문에, 넥제의 비용 문제를 1번으로 적어두었습니다!
There was a problem hiding this comment.
아울러, Vercel 을 이용하여 배포하는 공식 홈페이지 팀과 달리, 플레이그라운드와 크루 팀은 Cloudflare Pages 를 이용해 배포하고 있었으므로, Node.js 기반의 Next.js Image 를 사용할 수 없었습니다.
그리고 제가 이렇게 적어두니까, Cloudflare Pages 에서는 절대로 Next.js Image 를 사용할 수 없다는 느낌으로 비춰지네요..! 이 부분 수정해보도록 하겠습니다ㅎㅎ
There was a problem hiding this comment.
그리구 제가 언급한 “가장 비싼 Next.js Image 툴”은 넥제 이미지 태그의 이미지 리사이즈 툴입니다!
There was a problem hiding this comment.
혹시 추가적으로 궁금하신 부분 있으시면 디코로 이야기 해 보아요! :)
There was a problem hiding this comment.
엇 근데 지난기수 초반에 제가 처음 문제 파악해서 건영님께 조언 구했을 때도 Workers 말씀해주셔서, 현재 저희가 구현하고 있는 방식에 대해서 제가 조사했던 걸로 기억해요!! 근데 이부분은 그렇게 중요하지 않을 것 같구
제 의견이 좀 장황했던 것 같아 요점만 정리하자면
Cloudflare Pages가 next/image를 지원하지 않음 -> 이것이 1차적인 근본 원인이고
이를 해결하기 위해 고려해본 솔루션이
후보1) 비싼 솔루션
후보2) 저렴하지만 불안정한 솔루션
이렇게인데, 두가지 모두 한계가 있어서, 후보3)저렴하고 안정적인 솔루션 을 택하게 된 것이잖아요!
그래서 TF의 배경에 후보 1, 2도 언급되어야 하지만 근본적인 원인도 함께 언급되면 좋을 것 같다는 취지에서 드렸던 코멘트입니당
한번 생각해보시구 그래도 불필요하다고 생각되면 안넣어도 괜찮아유 !
There was a problem hiding this comment.
계속해서 좋은 의견 주셔서 너무 감사해요! 그런데 한 가지 생각해 볼 지점이, "Cloudflare Pages가 next/image를 지원하지 않음" 이 근본 원이이었다면, "Cloudflare Pages 가 next/image 를 쓸 수 있는 환경이었다면 > 우리는 next/image 를 썼을 것이다." 여야 하는데요,
저희는 지금 Cloudflare Images 를 구독함으로써, Cloudflare Pages 에서 next/image 를 쓸 수 있는 환경임에도 불구하고, 비용 문제로 Worker 를 이용해서 새로운 솔루션을 만들고 있는 것이니까 위 논리와는 모순이 되는 것 같아서요..!
그래서 승희언니가 말해준 근본적인 원인도 함께 언급되면 좋을 것 같다 는 의견은 너무 좋지만, 그것이 클플에서 next/image 를 지원하지 않아서가 되는 것은 조금 어려운 면이 있을 것 같다는 생각이에요..!
그래서 저는 오히려 TF 가 결성된 근본적인 원인이자 그냥 원인(ㅋㅋㅋㅋ)이, 비용과 안정성을 모두 적절히 가져갈 수 있는 툴이 부재했기 때문이라고 생각했습니다! :)
There was a problem hiding this comment.
남겨주신 코멘트 무슨 말씀인지 완전 이해했어요! 비용과 안정성을 모두 적절히 가져갈 수 있는 툴이 부재했기 때문-> 이 한마디가 진짜 딱 맞는 것 같아요.
그럼 이 논의를 마무리 지으려구 새로 업데이트된 리드미를 마지막으로 체크하려고 했는데요.... 그러던 중 또 의문이 들어버렸습니다 😭 해당 커밋에서 코멘트 이어갈게요!
README.md
Outdated
| 1. Next.js 의 Image 태그의 비용 문제 | ||
| Next.js Image 가 제공하는 이미지 리사이징은, 사용하기 가장 편리하지만, 사용할 수 있는 이미지 리사이징 툴 중 가장 비싼 가격을 책정하고 있었기에 사용에 어려움이 있었습니다. | ||
| Pro 요금제 결제 시, First 5,000 장까지는 추가 비용 없이 사용 가능하고, 이후로는 이미지 1,000장 당 $5.00의 요금이 발생했습니다. (2024년 10월 기준) | ||
|
|
||
|
|
||
| 2. 무료 이미지 리사이징 툴의 한계 | ||
| Next.js Image 의 대안으로서 playground 와 crew 팀에서는, wsrv.nl 이라는 무료 이미지 리사이징 툴을 사용하고 있으나, wsrv.nl 에서 간헐적으로 503 에러를 발생시키는 문제거 있었습니다. | ||
| Next.js Image 의 대안으로서 playground 와 crew 팀에서는, wsrv.nl 이라는 무료 이미지 리사이징 툴을 사용하고 있으나, wsrv.nl 에서 간헐적으로 503 에러를 발생시키는 문제가 있었습니다. | ||
| 이에 playground 팀에서는 알고리즘을 설계하여, 3초 안에 이미지 리사이징 서버로부터 응답이 오지 않을 경우, 이미지 리사이징을 포기하는 식의 휴리스틱한 해결책을 사용하고 있었고, | ||
| crew 팀에서는 이미지 리사이징에 실패할 경우에 대비한 해결책이 없어, 이미지 리사이징 에러 발생 시, 해당 이미지가 포함된 모든 컴포넌트가 로딩되지 않는 심각한 문제가 있었습니다. | ||
|
|
||
| 결국, 최소한의 비용으로 안정적인 이미지 리사이징을 지원할 수 있는 툴의 필요성이 대두되었고, 이를 해결하고자 Cloudflare 의 Images 와 Workers 를 이용하여 자체 이미지 리사이징 툴을 기획하게 되었습니다. | ||
|
|
||
| Cloudflare 의 Images 를 구독하여 사용할 경우, 월 $ 에, First 5,000 은 추가금 없이 리사이징이 가능하며, 이후 1,000번의 request 당 $0.50 의 추가 요금으로 리사이징이 가능하여, Next.js 의 Image 태그의 추가금과 비교했을 때, 약 1/10 의 비용 절감이 가능해집니다. (2024년 10월 기준) | ||
|
|
There was a problem hiding this comment.
근본적인 부분에 대한 논의라 정우님까지 태그드립니다 다들 의견 한번 보시고 제가 잘못 이해한 부분이 있다면 반박부탁드려요!!
@borimong @jungwoo3490
두괄식으로 아래 내용의 결론부터 말하자면 "우리가 Workers를 활용한 툴을 만들게 된 원인은 사실 비용이라고 하기 어렵다!"라는 의견을 한번 던져보려고 해요
편하게 이야기하기 위해서 제가 조사하고 이해한 바가 맞다는 전제 하에서 이야기할게요
제가 오해하고 있거나 잘못 이해한 부분이 있을 수 있으니, 만약 있다면 바아로 지적 부탁드려요
Next.js Image 가 제공하는 이미지 리사이징은, 사용하기 가장 편리하지만, 사용할 수 있는 이미지 리사이징 툴 중 가장 비싼 가격을 책정하고 있었기에 사용에 어려움이 있었습니다.
→ 주 원인으로 계속 언급해주셨던 비싼 비용 문제의 Next.js Image 리사이징 툴 이 어떤걸 말하는지 여쭤봤을 때, 요 친구를 말씀해주셨는데요!
보시면 이 친구는 Next.js Image 리사이징 툴이 아닌, Vercel이 제공하는 이미지 최적화 솔루션으로 보여요.
전달주신 자료의 내용을 보면, 해당 내용은 Next.js 이미지에 한하는게 아닌, Vercel로 배포되어 Vercel의 CDN을 사용하는 프로젝트에게 제공하는 솔루션이라는걸 알 수 있어요.
(단지 NextJS와 Vercel이 가족이라서 넥제 컴포넌트를 사용하기 편리한 형태일 뿐, 여기 Tutorial 보시면 우측에 Next.js 외에도 다양한 framework에서 사용 가능한 걸 확인할 수 있어요)
이말인 즉슨, 말씀해주신 가장 비싼 솔루션 은, 엄밀히 말하면 Next image의 솔루션이 아닌 Vercel 솔루션으로, Vercel에 배포된 서비스에 해당되는 내용이기 때문에 CloudFlare Pages로 배포하는 크루/플그 팀과는 연관이 없는 친구라고 생각해요.
그리고 . . ! 계속 찝찝한 느낌이 들어서 같은 문서를 계속 계속 . . 다시 읽어보다가 번뜩 깨달은게 있어요
저희가 계속 참고하던 이 목차들을 읽으면 아래의 내용을 확인할 수 있어요.
Cloudflare Images솔루션의Transform images기능을 사용하기 위한 조건은, 반드시enable transformations for zone설정을 해야 함 ⇒ 완료! ✅- 그 이후에 해당 기능을 실제로 사용하는 방법은 2가지인데
이 두가지는 말그대로 선택지이고,
그 선택지를 판단하는 기준은 CF가 제공하는 CDN(url)을 그대로 사용할 것이냐, 혹은 기본 제공되는 CDN의 최적화 기능을 일부 커스텀하거나 혹은 url 주소 형태를 커스텀할 수 있는 Workers로 직접 배포할 것이냐. 이렇게 갈리는 것 같아요.
Workers 설명 최상단에 Workers를 사용했을 때 좋은 점이 나와있는데요,
URL을 커스텀할 수 있다, image 실제 경로를 숨길 수 있다, 이미지 최적화 옵션들을 환경에 따라 동적으로 설정할 수 있다(쉽게 말해 기본 최적화 기능 커스텀)
이런 내용들이 있다고 말해주고 있어요.
즉 formatted URL 방식과 Workers 방식의 차이가 비용이 아니라 커스텀 가능 여부 / 자유도 라는 뜻이죠
따라서 zone 설정을 완료한 저희는 사실 지금 당장도 Workers를 직접 구현하지 않고 CF formatted URL을 사용해서 CF Images의 transformation 기능을 충분히 사용할 수 있는 상황이라는 겁니다!!
자.. 그래서 결론이 뭐냐!
Workers의 탄생 계기가 비용이 될 수 없다! 는 뜻입니다.
- 리드미 1번에서 언급된 비싼 솔루션은 앞서 말씀드린 이유로 플그/크루의 경우 아예 연관 없는 선택지이고
- 저희는 Workers를 구현하지 않고도 CF Images의 최적화 기능을 사용할 수 있기 때문이죠.
그럼 저희가 Workers를 만드는 진짜 목적은 뭘까… 다시 생각해보았는데요,
사실 위에 언급된 Workers의 장점들 중 하나여야 목적이 성립된다고 생각해요.
저희는 URL custom에는 연고가 없으니,
솝트와 관련된 도메인으로 origin을 제한하고, 사용하는 최적화 옵션을 특정하는 등 내부적인 작동 기능을 커스텀하는 목적이 Workers TF의 탄생배경이라고 할 수 있을 것 같아요.
제가 Cloudflare Images 솔루션에 대해 완벽하게 100% 이해하지 않고 뭔가 오해하고 있던게 몇가지가 있었는데,
혹시 TF팀원분들도 같은 오해를 하고 계실 수도 있다고 생각해서 이렇게 제가 새로이 깨달은 부분에 대해서 주절주절 설명해보았어요
읽어보시고 의견 부탁드립니당
There was a problem hiding this comment.
당연히 저도 잘못 알고 있는 부분이 있을지 모르지만, 제가 조사하며 습득한 정보에 한해서는 저도 승희님 말씀에 전적으로 공감하는 바입니다!
제가 next/image에 대해서 이해가 깊지는 않아서 궁금한 건데, Next.js를 사용한다고 해도 Vercel로 배포하지 않으면 현수님이 언급한 "Next.js Image 가 제공하는 이미지 리사이징" 방법으로는 리사이징을 할 수 없는 상황인걸까요...??
++ 위에 현수님 코멘트를 방금 읽었네요,,, Cloudflare Images를 구독하면 리사이징을 정상적으로 사용할 수 있지만, 유료 플랜을 사용해야 하는 상황이 맞나요?!
지금 저희가 겪고 있는 이슈를 우회하는 방안을 찾아보면서 이미지 리사이징에 굉장히 많은 방법이 있다는 것을 알게 되었어요. 승희님이 언급주신 것처럼 Workers를 구현해서 리사이징 하는 방법 이외에도 formatted URL를 사용하는 방법도 있고, 직접 Cloudflare Images API를 호출해서 리사이징하는 방법도 존재하더라구요.
Workers의 내부에서도 CF Images의 기능을 사용하지 않고 외부 이미지 처리 서비스에 리사이징 작업을 위임해서 처리받는 등 방법은 아주아주 다양하지만, 저희가 택한 방식인 Cloudflare Workers + CF Images의 조합이 갖는 가장 큰 강점은 CF Image가 제공하는 간편성 및 저렴한 서비스와 동시에 Cloudflare Workers의 자유도 높은 커스텀화 라고 생각했어요.
현재 zone 활성화가 정상적으로 이루어지기만 한다면 Workers 없이 formatted URL만으로도 Transform이 가능한 상황이니 Workers를 선택한 이유가 필요했고, 최적화 옵션을 입맛대로 설정하고 S3 버킷 주소를 필터링하는 등 쉽게 커스텀이 가능하다는 점이 그 이유라고 생각해요.
그렇다고 해서 저희가 단지 커스텀에만 목적을 둔 TF이라고 보기에는 어렵다고 생각해요. 위에 언급했듯이 Cloudflare Workers를 사용하면서도 외부 이미지 처리 서비스에 리사이징을 위임하게 된다면 커스텀은 가능하지만 비용이 비싼 방법이 되어버리니까요. 저희는 비용 절감 & 자유도 높은 커스텀 이 2가지에 목적을 둔 TF라는 생각이 들었어요!!
물론 승희님 말씀대로 Workers를 사용하는 이유는 비용보다는 커스텀 목적이 맞다고 생각합니다!!
There was a problem hiding this comment.
이말인 즉슨, 말씀해주신 가장 비싼 솔루션 은, 엄밀히 말하면 Next image의 솔루션이 아닌 Vercel 솔루션으로, Vercel에 배포된 서비스에 해당되는 내용이기 때문에 CloudFlare Pages로 배포하는 크루/플그 팀과는 연관이 없는 친구라고 생각해요.
Vercel 사에서 만든 것이, Next.js 이기 때문에, Next.js 의 이미지 태그는 기본적으로 제가 제공해드린, 버셀의 이미지 최적화 plan 을 따라요~! Cloudflare 는 Vercel 의 경쟁사(?)라서!!ㅋㅋㅋㅋ cloudflare images 를 구독하지 않으면, Next image 를 쓸 수 없지만, 구독을 하면(=돈을 내면,,) Next Image 를 쓸 수 있어요~!
솝트와 관련된 도메인으로 origin을 제한하고, 사용하는 최적화 옵션을 특정하는 등 내부적인 작동 기능을 커스텀하는 목적
요건 transform via Workers vs transform via url 의 기로에서 Workers 를 선택한 이유에 더 가까워 보여요. 왜냐하면 이렇게 화이트리스트를 지정하고 옵션을 최적화하는 것은 이미지 리사이징 툴이라면 보통 기본적으로 제공하는 기능들이거든요!
사실 이미지 리사이징 방법은, Cloudflare 내에서도 여러 개 이지만, 사실 wsrv.nl과 같은 무료 사설 서비스들도 있고, imgix, cloudinary 와 같은 비싼.. 사설 서비스들도 있고, img proxy 같이 직접 이미지 프록시 서버를 호스팅하는 서비스도 있고, 워커와 비슷하게 람다(AWS 서버리스 서비스)로 이미지 서버를 구축해서 리사이징 하는 방법도 있고, Next.js Image 태그를 쓰는 방법도 있는 등.. 엄청나게 다양하고 많아요! ㅋㅋㅋㅋ
그런데 제가 이미지 리사이징 tf 를 시작하면서 이 많은 서비스들 중에, Cloudflare를 제안하고 싶었던 이유는, 이미지 리사이징에 드는 돈이 Cloudflare Images 를 사용했을 때 가장 저렴했기 때문이었어요. 원래 이미지 리사이징은 CPU 집약 작업이라 돈이 굉장히 많이 드는 것이 정상인데, cloudlfare 의 경우 클라우드 서비스로, 규모의 경제를 통해 이렇게 저렴하게 제공할 수 있는 것이거든요.
그래서 정리를 하자면.. 저희 리사이징 TF 의 목적은, 이미지 리사이징 기능 제공을 통해, UX 를 향상시키기 이고, 이 과정에서, 우리는 지금 돈이 넉넉하지 않은 상황이기 때문에, 가능한 저렴하면서도 안정적인 서비스를 이용해서 이미지 리사이징을 할 필요가 있었고, 이때 이 조건을 모두 만족하여 채택한 것이 Cloudflare Images 였으며, 그 중에 Worker 를 선택하게 된 계기가 솝트와 관련된 도메인으로 origin을 제한하고, 사용하는 최적화 옵션을 특정할 수 있었기 때문이라고 생각해요~
저희 프로젝트에 대한 간단한 소개와 실행 방법, 프로젝트 배경에 대한 설명이 담긴 기본 리드미를 작성해보았어요~!
사용 방법 리드미 작성은, 커스텀 로더 리서치 진행 후에 승희언니나 정우오빠가 담당해주면 좋을 것 같습니다!