[머니업 라이브] MBTI로 웹사이트 수익 내는 법, 한 방에 알려드림!
₩1,100
5일만
30%
₩770
입문 / 수익화
웹 수익화에 관심있는 사람 누구나, <케이테스트>를 만든 코배투님이 직접 말해주는 수익화의 모든 것!
입문
수익화
<코딩 배워 투자하자> 코배투입니다.
수익형 프로그래밍 <코딩 배워 사업하자> 시리즈 강의로 여러분께 먼저 선보입니다.
1개월에 수익형 서비스를 하나씩 런칭하는 [한달 런칭 챌린지 클럽]과 [코배투 뉴스레터]를 운영하고 있습니다.
2018년부터 금융권 기업 대상 재무 데이터 분석, 퀀트 프로그래밍 강의를 진행하고 있고,
2020년부터 MBTI 기반 심리테스트 플랫폼 <케이테스트>를 개발/운영하고 있습니다.
[머니업 라이브] MBTI로 웹사이트 수익 내는 법, 한 방에 알려드림!
₩1,100
5일만
30%
₩770
입문 / 수익화
웹 수익화에 관심있는 사람 누구나, <케이테스트>를 만든 코배투님이 직접 말해주는 수익화의 모든 것!
입문
수익화
모집마감
[머니업 챌린지] 코배투의 웹 수익화 챌린지
무료
입문 / 수익화
신청
25. 02. 25 ~ 25. 03. 12
일정
25. 02. 25 ~ 25. 03. 24
입문
수익화
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
₩261,800
5일만
30%
₩183,260
초급 / React, AWS, cloudflare, adsense, Google Analytics, 수익화
5.0
(7)
React로 광고 수익형 웹사이트를 만들어 봅니다. 광고를 최적화 하고 서버 비용을 줄이기 위한 방법과 규모에 따른 사이트 운영 Tip까지 배워봅니다.
초급
React, AWS, cloudflare
질문&답변
이용 약관 코드도 제공을 해 주시나요?
안녕하세요.우선 강의 잘 들어주셔서 진심으로 감사드립니다. 해당 구글 OAuth 이용 약관(Terms of Services)에 대한 코드는 아래 Github 링크를 참고 부탁드립니다.https://github.com/cobaetoo/mbti-contents-platform/blob/main/src/page/Terms.jsx 감사합니다.
질문&답변
코드 힌트 방법
안녕하세요.해당 기능은 VS code의 Inlay Hints라는 기능인데요.아래에 설정 방법을 정리드립니다. VS Code Inlay Hints 설정 방벙설정 열기:단축키: Ctrl + , (Windows/Linux) 또는 Cmd + , (macOS)메뉴: 파일(File) > 기본 설정(Preferences) > 설정(Settings)검색:설정 검색창에 inlay hints 입력주요 설정:Editor > Inlay Hints: Enabled: 전체 Inlay Hints 기능 켜기/끄기 ("editor.inlayHints.enabled")언어별 설정: 검색 결과에서 사용하는 언어(예: TypeScript, JavaScript, Python) 섹션 찾기세부 옵션: 해당 언어 섹션 아래에서 원하는 힌트 종류 (파라미터 이름, 변수 타입 등)를 켜거나 끕니다.예: TypeScript > Inlay Hints > Parameter Names: Enabled ("typescript.inlayHints.parameterNames.enabled")예: JavaScript > Inlay Hints > Variable Types: Enabled ("javascript.inlayHints.variableTypes.enabled")적용: 설정 변경 즉시 코드 에디터에 반영됩니다.
질문&답변
마지막 강의에서 다음 강의가 있다고 하셨는데 곧 올라오나요?
안녕하세요.우선 강의를 선택해 주셔서 진심으로 감사드립니다.배포된 서비스와 DB를 테스트하기 위한 마지막 영상이 마무리 편집 중에 있어 곧 업로드 될 예정입니다.올라가는 대로 다시 소식 전달드리겠습니다.감사합니다.
질문&답변
rem 단위를 쓰는 이유
웹 프로그래밍에서 CSS를 작성할 때, 픽셀(px) 대신에 'rem'을 사용하는 이유는 여러 가지 장점이 있기 때문입니다. 여기서 'rem'의 의미는 'root em'으로, 기준이 되는 폰트 크기는 HTML 문서의 루트 요소(html)의 폰트 크기로 간주됩니다. 픽셀(px) 사용의 문제점고정된 크기: 픽셀은 고정된 단위이기 때문에 사용자가 브라우저의 폰트 크기를 변경해도 웹사이트의 텍스트 크기는 변하지 않습니다.반응형 디자인 문제: 다양한 화면 크기와 해상도를 가진 장치에서 동일한 레이아웃과 디자인을 유지하기 어렵습니다. rem 사용의 장점상대적인 크기: rem은 상대적인 단위이기 때문에, 사용자의 브라우저 설정이나 화면 크기에 따라 동적으로 크기 조절이 가능합니다.접근성 향상: 사용자가 브라우저의 폰트 크기를 증가시키면, rem 단위로 설정된 모든 요소들이 그에 따라 커지게 됩니다. 이는 시각 장애가 있는 사용자들에게 매우 유용합니다.반응형 디자인 용이: 다양한 장치와 화면 크기에 대응하는 반응형 디자인을 구현할 때 rem을 사용하면 훨씬 더 쉽게 레이아웃과 디자인을 조절할 수 있습니다.일관된 비율 유지: 페이지의 모든 요소들이 rem 단위로 크기가 설정되면, 페이지의 구조와 레이아웃이 일관된 비율로 조정됩니다. 이는 디자인과 개발의 일관성을 유지하는 데 도움이 됩니다.
질문&답변
리액트를 선택한 이유
안녕하세요.우선 강의 수강하여 주셔서 감사드립니다. 리액트 이외에도 Svelt, Remix, Vue, Angular 등 Javascript/Typescript 기반 여러 프론트엔드 프레임워크가 존재하고 있죠.다만 이 중에서도 가장 많은 개발자들이 사용하고, 따라서 관련 커뮤니티 및 자료가 풍부한 프레임워크는 단연 리액트입니다.웹 프로그래밍을 처음 배우는 분들을 함께 고려했을 때, 또는 이미 웹 프로그래밍을 잘 하실 수 있는 분들에게도 많은 사용자들이 사용하고 있어서 활발히 개선이 되는 프레임워크를 사용한다는 것은 큰 장점이 되기 때문입니다. 잠재 버그를 잡는 등 자정 작용이 활발하게 이뤄지기 때문이에요.이 강의에서 그치는 것이 아니라 추후 다른 형태의 서비스를 스스로 만드시게 될텐데, 그때 손쉽게 자료를 찾고 적용하실 수 있도록 리액트 라이브러리를 선정했습니다.
질문&답변
구글 애드센스의 경우 한 개의 아이디로 여러 사이트에 등록이 가능한 것인지 궁금합니다.
안녕하세요.강의 들어주시고 좋은 질문 주셔서 감사합니다. 가능합니다. 해당 방식이 구글에서 권장하는 애드센스 활용 방법입니다.불가능한 것은 아니지만 쉽지 않을 거예요. 결국 수익을 받기 위해서는 추후 수취인 정보, 전화번호, 주소 등의 증빙이 필요한데요. 한 명이 여러 주소와 번호를 운영하며 증빙하는 것이 쉽지 않을 듯해요. 여러 명이 여러개를 받는다면 가능하겠지만 그것을 결국 1번과 같은 구조가 될 거예요.구글의 정책상 원칙은 1인당 1계정 이긴 하지만, 증빙(특히 수익 정산을 위한)이 가능한 범위 내에서 여러 개의 애드센스 계정을 운영하실 수 있습니다.고맙습니다.
질문&답변
이미지 제작에 관한 문의
안녕하세요.우선 본 강의를 수강해 주셔서 진심으로 감사드립니다.아쉽게도 이미지를 생성하는 부분은 따로 다룰 예정은 없습니다만,근래 GPT 등 LLM 모델의 발전 속도가 워낙 빠르게 진행되어 이미지 생성 모델도 하루가 멀다하고 엄청난 퀄리티 상승을 보이고 있습니다. 이제 GPT, Gemini 등으로 콘텐츠를 기획 후,아래의 모델을 사용해 썸네일, 인트로, 결과 이미지를 제작 해달라고 요청하면 텍스트까지 잘 생성해주어 도움이 될 것입니다. chatGPT-4o by OpenAIhttps://inf.run/ozJK3 Whisk by Googlehttps://inf.run/YWw6r
질문&답변
Layout 을 추가하니, ThumbnailList가 2번 그려지는 현상이 있어요.
안녕하세요.어떤 상황인지 확인하기 위해 main.jsx와 Layout.jsx 코드 전체 스크린샷을 보내주실 수 있을까요?
질문&답변
privacy policy 질문
한글로 작성하셔도 무방합니다.다만 Google에 Adsense 심사를 요청할 때 영문으로 작성하는 편이 깔끔하기 때문에 영문으로 강의에 넣었습니다.
질문&답변
netlify 배포는 어떤가요?
Netlify 역시 좋은 선택지입니다.다만 Vercel과 비교했을 때,서버리스 함수 제한: Vercel에 비해 서버리스 함수 실행 시간 및 용량 제한이 있을 수 있습니다.가격 정책: 트래픽이 많거나 대규모 프로젝트의 경우 Vercel보다 비용이 더 많이 들 수 있습니다.유연성 부족: Vercel에 비해 커스텀 설정이나 고급 기능이 제한적일 수 있습니다.더불어, 추후 다음 강의에서 다룰 Next.js 와 궁합이 가장 잘 맞는 호스팅 서비스가 Vercel이기 때문에 추천드립니다.