Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

기본 리드미 파일 작성 #5

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

기본 리드미 파일 작성 #5

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
81ebe41
Create README.md
borimong Oct 6, 2024
2801bc6
Update README.md
borimong Oct 6, 2024
bd80474
Update README.md
borimong Oct 6, 2024
3b815b6
Update README.md
borimong Oct 6, 2024
117d327
Update README.md
borimong Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,19 @@ sopt-makers 소속의 웹 프러덕트 팀(플레이그라운드 팀, 크루 팀
```

## 🔍 프로젝트 배경
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

별건 아니지만 개행이 누락된 것 같아요 !

1. Next.js Image 의 비용 문제
sopt makers 의 서버비는 sopt 와 후원사의 지원금으로 운영됩니다. Next.js Image 는 가장 편리하지만, 사용할 수 있는 이미지 리사이징 툴 중 가장 비싼 가격을 책정하고 있었기에 사용에 어려움이 있었습니다. 아울러, Vercel 을 이용하여 배포하는 공식 홈페이지 팀과 달리, 플레이그라운드와 크루 팀은 Cloudflare Pages 를 이용해 배포하고 있었으므로, Node.js 기반의 Next.js Image 를 사용할 수 없었습니다.
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월 기준)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

근본적인 부분에 대한 논의라 정우님까지 태그드립니다 다들 의견 한번 보시고 제가 잘못 이해한 부분이 있다면 반박부탁드려요!!
@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로 배포하는 크루/플그 팀과는 연관이 없는 친구라고 생각해요.

그리고 . . ! 계속 찝찝한 느낌이 들어서 같은 문서를 계속 계속 . . 다시 읽어보다가 번뜩 깨달은게 있어요

image

저희가 계속 참고하던 이 목차들을 읽으면 아래의 내용을 확인할 수 있어요.

이 두가지는 말그대로 선택지이고,
그 선택지를 판단하는 기준은 CF가 제공하는 CDN(url)을 그대로 사용할 것이냐, 혹은 기본 제공되는 CDN의 최적화 기능을 일부 커스텀하거나 혹은 url 주소 형태를 커스텀할 수 있는 Workers로 직접 배포할 것이냐. 이렇게 갈리는 것 같아요.

image

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팀원분들도 같은 오해를 하고 계실 수도 있다고 생각해서 이렇게 제가 새로이 깨달은 부분에 대해서 주절주절 설명해보았어요

읽어보시고 의견 부탁드립니당

Copy link
Member

@jungwoo3490 jungwoo3490 Oct 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

당연히 저도 잘못 알고 있는 부분이 있을지 모르지만, 제가 조사하며 습득한 정보에 한해서는 저도 승희님 말씀에 전적으로 공감하는 바입니다!

제가 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를 사용하는 이유는 비용보다는 커스텀 목적이 맞다고 생각합니다!!

Copy link
Contributor Author

@borimong borimong Oct 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이말인 즉슨, 말씀해주신 가장 비싼 솔루션 은, 엄밀히 말하면 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을 제한하고, 사용하는 최적화 옵션을 특정할 수 있었기 때문이라고 생각해요~

## 📢 사용 방법
여기는 넥제 커스텀 로더 리서치 진행 후 이어서 쓰기~