1) 포기한다

2) 아는 개발자를 수소문한다

3) 외주를 맡긴다

4) 노코드 툴로 만든다

5) 직접 개발한다

웹 사이트를 만들고 싶다...

토막 지식

• 서비스 이름? 도메인은?
• 어떤 무드로 만들고 싶은지?
• 강조하고 싶은 한 줄 설명은?
• Hero 섹션(배너)에 들어갈 내용은?
• 서비스 소개(내 소개) 내용은? 

만들기 전에 대충 구성이라도 짜볼까..?

웹 사이트 기획이 시작💡

토막 지식

• 워낙 유명한 Figma
  • https://www.figma.com/community/

• 웹으로 다루기 편하고 조금 더 기획이 쉬운 pixso
  • https://pixso.net/

웹 사이트 기획을 먼저해볼까요💡

아....

난이도 기준 웹빌더

출처 : 일잘하는 장피엠

• ✅ Carrd - 1장 사이트 만들기 최적화
• ✅ Typedream - 슬래시(/) 기반으로 사이트 구성 가능
• Softr
• Wix - 디자인 자유도가 높은 편
• 아임웹 - 쇼핑몰을 위한 기능들 많이 제공
   
• ✅ Webflow - 자료가 많고, 커뮤니티 활발, 소스코드 첨부 가능
• ✅ Bubble - 웹빌더의 끝판왕(?!)

웹 사이트 만드는 노코드, 웹빌더

설문지

• 구글 폼 대신 Typeform 써보세요. 예뻐요.

메일링

• stibee, mailchamp
   

데이터, 워크플로우

• DB 대신 사용할 수 있는 airtable : 무궁무진한 활용💪

자주 사용되는 노코드들

노마드 인 서울, 컨셉 랜딩 페이지

• 초기 노마드 인 서울, 컨셉 랜딩 페이지

- 노션

- oopy.io

- 타입폼

(사이트 링크, 블로그 링크)
 

유즈 케이스 

원격근무 노마드 리스트

• (노마드 코더) 2019년 9월에 제작, 원격근무 구직 관련 정보를 볼 수 있는 사이트

사용 툴: Carrd, Airtable

소요 시간: 약 2–3시간

특징

• 정보를 보고, 사용자가 직접 내용을 추가할 수 있다.
• 데이터베이스: Airtable 이라는 엑셀형 프로그램 활용

(블로그 링크)

유즈 케이스 

사이드 프로젝트 자랑 페이지

• (노마드 코더) 2020년 7월에 만든, 사이드 프로젝트 자랑질 웹사이트이다.

사용 툴: Pory, Airtable

소요 시간: 약 2–3시간

특징

• 정보를 보고, 사용자가 투표도 하고, 직접 내용을 추가할 수 있다.
• 데이터베이스: Airtable이라는 엑셀형 프로그램 활용
   

(사이트 링크, 블로그 링크)

​

유즈 케이스 

유즈 케이스

블라인드 노코드 적용 사례

• 노마드인서울, 코딩 1도 모르는 문과가 노코드(No-code)로 만든 웹사이트
• 노코드: 개발자 없이 소프트웨어 개발을 할 수 있는 14가지 툴
• 버블 제작 프로덕트 아카이빙
• 코딩 1도 없이 서비스 4개 만들기
• 노코드캠프, 블로그
• ...

노코드 사례 확인 할 수 있는 자료

제안 받습니다~!

• 내 도메인 구매해서 연결하기
   
• 노코드에도 쓰이는 스타일링 용어들 (Feat. CSS)
  • padding, border, margin, spacing 등
     
• 자동화 등 다른 노코드 툴 탐색 공유
   
• 슬로건? 문장 만드는 툴/팁 공유

스낵 웹지식, 어떤 게 좋을까요?

새로운 목표

• 완성 후, 우리 사이트 전시하고 자랑해요😎
• 마지막 주차에 오프라인 모임 진행해요 🕺
• 끝까지 함께 도와가며 마무리 해요 🔥

매주 일요일 9시, ZEP에서 만나요~👋🏻

2주차 Meet-up!

2023.01.29

오늘 스터디 순서

[2주차 미션 : 1st : 스터디 시작할 때, 목표 & 액션 플랜 공유하기]

Q. 이번 주 목표는 무엇인가요?

1. 참고하기로 한 사이트의 틀을 먼저 만들어 둘 생각입니다.

Q. 목표를 달성할 수 있는 ‘Action Plan’을 작성해주세요

1/19-1/21 html,css 활용한 포폴웹사이트 틀 완성

DeanYoon's 1st 미션

현재 배우고 있는 ReactJS 를 활용해서
https://main.d3u6yjfxnkwlmm.amplifyapp.com/ 사이트를 참고하여 만들어 보았습니다.

아직 중간정도만 만들어두고 포트폴리오 내용은 추가해야해요!

Q. 결과물이 있다면 링크를 공유해주세요~!
https://deanyoon.github.io/portfolio/

[ 알게 된 점 & 느낀 점 ]

생각보다 nodeJS 를 활용할때보다 리액트가 훨씬 더 간편하고 깔끔하다고 생각합니다.

이래서 취업공고에 리액트는 기본으로 다 깔고 가나봐요..

얼른 더 공부해서 프로젝트 채워서 많은 회사에 지원할 정도의 실력이 됐으면 좋겠습니다

Q. 다음주는 어떤 목표를 세울 예정이신가요?

참고한 사이트와 비슷하게 기능들을 구현하고 제작한 프로젝트들을 추가 하도록 하겠습니다!

DeanYoon님

현재 배우고 있는 ReactJS 를 활용해서
https://main.d3u6yjfxnkwlmm.amplifyapp.com/ 사이트를 참고하여 만들어 보았습니다.

아직 중간정도만 만들어두고 포트폴리오 내용은 추가해야해요!

Q. 결과물이 있다면 링크를 공유해주세요~!
https://deanyoon.github.io/portfolio/

[ 알게 된 점 & 느낀 점 ]

생각보다 nodeJS 를 활용할때보다 리액트가 훨씬 더 간편하고 깔끔하다고 생각합니다.

이래서 취업공고에 리액트는 기본으로 다 깔고 가나봐요..

얼른 더 공부해서 프로젝트 채워서 많은 회사에 지원할 정도의 실력이 됐으면 좋겠습니다

Q. 다음주는 어떤 목표를 세울 예정이신가요?

참고한 사이트와 비슷하게 기능들을 구현하고 제작한 프로젝트들을 추가 하도록 하겠습니다!

DeanYoon님 미션

웹 사이트에 접속하면 보이는 주소!

도메인 주소는 왜 돈주고 사야할까?

(돈은 대체 누구한테 가고, 누가 도메인을 만드는 걸까?)

인터넷에 연결된 웹 사이트는 모두 IP 주소를 갖고 있다

IP가 웹 사이트에 접속할 수 있는 실제 주소다

하지만 IP주소는 긴 숫자(223.130.200.104)로 구성되어 있어서 외울 수가 없다.

그래서 생겨난 것이 도메인 시스템.

도메인 시스템은 전화번호부처럼 이름과 IP 주소가 짝지어 저장되어 있는 시스템이다.

도메인을 왜 돈주고 사야할까?

그런데 도메인이 수백만 개가 넘어서, 도메인 시스템을 관리하는 시스템이 따로 있다.

- 전화번호부를 관리하는 서브 전화번호부가 있는 것과 비슷

이러한 서브 전화번호부를 레지스트리(registry)라고 한다.

레지스트리는 기업에서 운영하고, 가장 유명한 곳이 닷컴(.com)이다.

- 닷컴 관리는 Verisign이라는 회사에서 한다. 

레스스트리는 수익성이 꽤 좋은 사업이지만, 신경쓸 것도 많다.

도메인을 입력하면 이를 IP 주소로 빠르게 연결할 수 있어야 하고

보안 요소를 구축하고 있어야 한다.

서브 전화번호부, 레지스트리

하지만, 레지스트리를 관리하는 기업은 도메인을 만드는 역할을 할 뿐,

도메인을 직접 판매하지는 않는다.

우리가 도메인을 사고 싶을 때 verisign을 방문하지 않는다.

도메인은 GoDaddy, Gabia, Whois같은

리셀러에게서 사야한다

리셀러가 필요한 이유는 '도메인을 레지스트리에 등록하는 과정이 매우 복잡하기 때문'이다. 

- 회원 관리, 결제, 도메인 관리 등

그래서 리셀러가 도메인 등록을 대신해주고
유저에게 실제 도메인 비용보다 더 비싼 금액을 받는다.

도메인은 어디서 살까?

우리도 .nomad와 같은 새로운 레지스트리를 운영할 수 있을까?

할 수 있다! ICANN(아이캔)에 신청만 하면된다.

도메인을 관리하는 비영리 기우인데, 최상위 전화번호부 역할을 하는 곳이다.

하지만, 신청 비용이 엄청난데, 18만 5천달러 정도로 한화로 2억 2천만원 쯤 된다.

그리고 인터넷 환경, 도메인을 운영할 수 있는 인프라 기술, 고객 관리 능력 등을 갖추고 있는지

ICANN에 증명해야한다.

그럼 혹시 나도 레지스트리 운영을..?