본문 바로가기
더나은 TheNoun. 로고TheNoun.Academy더나은 아카데미
더나은 TheNoun. 로고TheNoun.Academy더나은 아카데미
디자인 셋으로 홈페이지와 플랫폼 한 번에 만들기전체 보기
강의 목록

Claude Code 시리즈 · 3강

디자인 · 9단계 · 약 40분

디자인 셋으로 홈페이지와 플랫폼 한 번에 만들기 — 로그인·관리 화면까지

맥이나 윈도우 컴퓨터와 클로드 유료 요금제가 필요해요.

1강·2강을 마쳐 홈페이지가 인터넷에 올라가 있어야 해요. 그 홈페이지에 디자인을 입히고, platform. 주소에 로그인과 관리 화면을 한 번에 만들어요.

1강·2강으로 올린 홈페이지에 디자인을 입히고, 로그인과 관리 화면이 있는 플랫폼을 같은 디자인으로 만들어요.

홈페이지 화면과 로그인 화면과 관리 화면 세 장이 같은 디자인으로 겹쳐 놓인 모습을 입체로 그린 표지

로그인하면 강의가 열립니다

Google·카카오·이메일 중 편한 방법으로 로그인하면 이 화면으로 바로 돌아와요.

로그인하러 가기

이 강의로 얻는 것

나에게 생기는 것
내 홈페이지에 TheNoun. 디자인이 입혀지고, platform. 주소에 가입·로그인이 되는 로그인 화면과 관리 화면이 열려요. 원하는 화면은 말로 정확히 요구하면 같은 디자인으로 만들어 줘요.
AI가 새로 할 수 있는 일
1강·2강으로 올린 홈페이지에 디자인을 입히고, 로그인과 관리 화면이 있는 플랫폼을 platform. 주소로 만들어 올리는 일
직접 따라 하는 시간
약 40분
강의 밖 비용
새로 결제할 것은 없어요. 수파베이스 무료 플랜과 클라우드플레어는 무료이고 디자인 도구는 academy 로그인 하나로 쓰며, 클로드 요금제와 도메인은 1강에서 쓰던 그대로예요.
내가 직접 할 일
가입·로그인(수파베이스, 클라우드플레어 — 비밀번호는 그 화면 칸에 직접) · 가입 확인 메일 버튼 누르기(시험 가입) · 「허용」 누르기(깃허브에 보관·인터넷에 올릴 때) · 고르기(대표 색 한 가지)

비용은 2026년 10월 8일 기준이에요.

출처 TheNoun.Academy 디자인 도구 안내(새 창)(2026-10-08 확인) · 수파베이스 요금(새 창)(2026-10-08 확인) · 클라우드플레어 요금(새 창)(2026-10-06 확인)

누구에게 맞나요?

  • 1강·2강으로 올린 홈페이지에 제대로 된 디자인을 입히고 싶은 분
  • 홈페이지 말고 로그인해서 쓰는 내 서비스 화면(플랫폼)도 갖고 싶은 분
  • 화면을 만들 때마다 모양이 달라지는 것이 걱정인 분

무엇을 배우나요?

  1. 1강·2강으로 올린 내 홈페이지에 TheNoun. 디자인이 입혀져요. 2강에서 한 검색 설정은 그대로 남아요.
  2. platform. 으로 시작하는 주소에 로그인 화면과 관리 화면(대시보드)이 열려요.
  3. 로그인은 수파베이스(Supabase)에 안전하게 보관돼요. 가입과 로그인이 실제로 돼요.
  4. 원하는 화면을 말로 정확하게 요구하는 법을 알게 돼요.

비용 안내

2026년 10월 8일 기준

항목비용
TheNoun. 디자인 도구(academy MCP 안)무료(academy 로그인 하나로 — 따로 가입·카드 없음)
수파베이스(로그인 보관함) 무료 플랜월 $0, 일주일 동안 쓰지 않으면 잠시 멈춰요
클라우드플레어(platform. 주소도 같은 곳)무료

클로드 요금제와 도메인은 1강에서 쓰던 그대로예요. 이 강의에서 새로 결제할 것은 없어요. 수파베이스는 쓰는 양이 늘면 유료로 올릴 수 있어요.

출처 TheNoun.Academy 디자인 도구 안내(새 창)(2026-10-08 확인) · 수파베이스 요금(새 창)(2026-10-08 확인) · 클라우드플레어 요금(새 창)(2026-10-06 확인)

무엇이 필요하고 얼마나 걸리나요?

컴퓨터
맥 또는 윈도우 컴퓨터
준비물
1강·2강을 마쳐 인터넷에 올라가 있는 내 홈페이지와 「내 홈페이지」 폴더 · 클로드 유료 요금제와 클로드 데스크톱 앱(1강과 같아요) · 수파베이스(Supabase) 가입과 새 프로젝트 하나(무료) · 어사이드에서 수파베이스·클라우드플레어·깃허브 로그인
직접 하는 시간
약 40분
기다리는 시간
platform. 주소가 열리기까지 몇 분 걸릴 수 있어요.
화면
화면 설명은 맥 기준이에요.
강사
AI 컨설턴트 최경민
기준일
2026년 10월 8일(화면과 가격)

자주 묻는 질문

이 강의에서 무엇을 하나요?

1강·2강으로 올린 홈페이지에 TheNoun. 디자인을 입히고, platform. 주소에 로그인 화면과 관리 화면이 있는 플랫폼을 만들어 올려요. 로그인은 수파베이스에 보관해요. 클로드에게 한 줄만 보내면 클로드가 끝까지 해요.

먼저 해야 하는 강의가 있나요?

1강 클로드 코드로 홈페이지 만들기(새 창)와 2강 서치어드바이저 등록부터 AI 검색까지(새 창)를 꼭 먼저 마쳐야 해요. 홈페이지가 인터넷에 올라가 있어야 디자인을 입히고 플랫폼 주소를 이을 수 있어요.

누구에게 맞는 강의인가요?

1강·2강으로 올린 홈페이지에 제대로 된 디자인을 입히고 싶은 분, 로그인해서 쓰는 내 서비스 화면(플랫폼)도 갖고 싶은 분, 화면을 만들 때마다 모양이 달라지는 것이 걱정인 분께 맞아요.

비용은 얼마나 드나요?

강의는 무료예요. 처음 듣는 강의 하나는 로그인 없이 열리고, 이 강의는 로그인해요. 수파베이스 무료 플랜·클라우드플레어는 무료이고, TheNoun. 디자인 도구는 따로 가입 없이 academy 로그인 하나로 써요. 수파베이스 무료 프로젝트는 일주일 동안 쓰지 않으면 잠시 멈추고, 필요하면 유료로 올릴 수 있어요. 클로드 요금제와 도메인은 1강에서 쓰던 그대로예요.

출처 수파베이스 요금(새 창)(2026-10-08 확인) · 수파베이스 무료 프로젝트 멈춤 안내(새 창)(2026-10-08 확인) · TheNoun.Academy 디자인 도구 안내(새 창)(2026-10-08 확인) · 클라우드플레어 요금(새 창)(2026-10-06 확인)

얼마나 걸리나요?

직접 따라 하는 시간은 40분 정도예요. 클로드가 0단계부터 7단계까지 이어서 하고, 나는 가입·로그인·가입 확인 메일 누르기·「허용」 누르기를 할 때만 손을 대요.

로그인은 어떻게 만들어지나요?

수파베이스(Supabase, 로그인 정보를 안전하게 보관해 주는 곳)에 내 프로젝트를 만들고, 이메일과 비밀번호로 가입·로그인하게 해요. 가입은 내가 하고, 나머지는 클로드가 해요. 비밀 키는 열지도 쓰지도 않아요.

출처 수파베이스 요금(새 창)(2026-10-08 확인)