랜딩페이지 만들기 원데이클래스 연다

개발 몰라도 됨

Jinhwan Kim
6 min readJan 1, 2025

뭘 만들건지

요거 만들거다. 이어지는 내용은 사진들

이런식으로 꽤 그럴싸한 랜딩페이지 (원페이지)를 만들 수 있다.

별도로 결과에는 없지만 코드가 구현 되어 있는 TEAM이나, CONTACT도 있긴 한데 사용 가능한지는 모르겠다.

실제 접속 가능한 링크

https://wonderfullandingpage.github.io/mylandingpage/

리액트로 만들어져 공개되어 있는 템플릿을 활용할거고, 아래 예시 주소처럼 깃허브 페이지로 올릴 수 있다.

즉, 이 랜딩페이지는 (본인이 한다면) 제작과 유지보수에 비용이 들지 않는다.

랜딩페이지 만드는 법, 왜 배워야 하는가

예전에는 노마드를 비롯한 시간과 공간의 자유를 목적으로 개인 독립이 많아졌다면, 요즘에는 다른 이유로 개인 독립이 많아지는 것 같다.

LK99만 성공했었어도 바뀔 수 있었겠지만, 점점 경제가 어려워진다. 대기업이고 중소기업이고 스타트업이고 폐업과 구조조정 소식이 많이 들려오고 점점 각자도생해야 하는 분위기로 가고 있기 때문.

이를 위해 인스타그램이나 자체 블로그 등도 자신의 아이템을 소개하는 선택지가 될 수 있지만, 랜딩페이지는 궁극적으로 사업자에게 필요한 것 중 하나라고 생각한다.

그만큼 랜딩페이지는 수십 ~ 수백만원 정도의 단가로 꾸준하게 프로젝트로 나타나는 주제이기도 하다. 아래는 위시켓에서 실제 있던 프로젝트들과 비용

노코드

물론 요즘은 워낙 좋은 “노코드” 툴들이 많아서 내가 다루고자 하는 랜딩페이지 작업에 비하면 훨씬 쉽게 만들 수 있기도 하다. 그러나 이런 툴들은 제작이 쉬운 대신 유지보수에 계속 비용을 내야한다.

이러한 상황에서 스스로 랜딩페이지를 개발하는 것은 이후의 비용이 거의 없다고 해도 지식을 쌓기 위한 난이도가 있기 때문에 개발 백그라운드가 없거나, 다른 분야에 전문성을 가진 (특히 많은 사장님들은 기획쪽이라고 생각함) 사람들 입장에서는 그냥 돈을 조금 태우더라도 쉽게 하는게 낫다. 라고 생각할 수 있다. (나도 이 생각에 꽤 동의하고)

이 프로토타입 / 노코드 기반 랜딩페이지, 그리고 장단점에 대한 이야기는 노션이나 버블 등의 커뮤니티에 가면 많이 있기 때문에 굳이 다루지 않겠음.

쉬워진 개발

그런데, AI로 꽤 많은 것을 할 수 있기 때문에 이제 개발 입문 장벽이 낮아졌다. 이전부터 AI를 잘 쓰면 2–3년차 역할은 할 수 있다고 주장해왔는데, 실제로 해보니 리액트고 뭐고 몰라도 결과물 만들 수 있더라.

아래는 내가 쓰려고 예시로 만든 거다. (이름부터 랜딩의 L하고 D임)나중에 도메인 포함해서 내용은 바뀔 예정 (gpt랑 코파일럿 혼용했고 시작부터 첫 완성까지는 3시간 정도 걸림)

https://jahnen.io/

이 내용은 처음 붙인 링크에 템플릿이 공개 되어 있는 만큼, 당연히 내가 했던 것처럼 스스로 따라가면서 할 수 있다.

그런데 이 템플릿은 만들어진지 4년 정도 지났고 그 동안 사용하는 라이브러리들이 업데이트 되면서 꽤 많은 내용들이 삐걱거린다. (특히 fontawesome 아이콘이 4.0을 기준으로 되어 있는데 최근 버전은 6.3이다)

이 내용을 따라가면서 원활하게 돌아 갈 수 있도록 갈아 엎는 건, 꽤 많은 노가다가 필요한데 내가 이 부분을 먼저 경험했기 때문에 원데이 클래스로 그만큼 시행착오를 줄일 수 있다.

그래서 뭘 얻어갈 수 있는가

  • 내가 만든 것처럼 랜딩페이지를 만들어 웹에 올릴 수 있는 방법, 여기에는 템플릿의 내용을 수정하거나 커스텀하는 방법도 포함. 물고기 말고 물고기 잡는 법 !
  • 개발 백그라운드가 없어도 깃허브와 코파일럿, IDE 연동 등 기초적인 “개발 세팅” 방법. 그래서 나중에 또 다른 멋진 템플릿을 본다면 혼자서도 뚝딱뚝딱 활용할 수 있게 된다.
  • 결과적으로 아이템이 있고, 이를 위한 랜딩페이지를 만들 수 있다면, 스스로 원하는 시간과 공간에서 일할 수 있는 독립을 위한 방법 중 하나를 배울 수 있게 된다. (사업자 내는 법도 필요하면 알려줌)
  • 코드는 줄거고, 프로세스를 기록하는 노트도 아마 PDF로 줄 수 있을 것 같긴하다. 녹화 영상은 나중에 별도로 만들것 같은데 참가자들에게는 따로 챙겨 주겠음.
  • 만약 배워보고 아니다 싶으면 “이런 부분은 나 혹은 또 다른 전문가한테 그냥 맡기고 내가 잘하는 걸 하자” 라는 교훈을 배울 수 있다.

구체적인 원데이 클래스 내용

  • 이런 워크샵 / 세미나는 따라하다 막히고 뭐가 안 될때 바로 물어보고 봐주는게 좋으니 오프라인이 좋다고 생각. 물론 온라인도 가능은 하다. 장소는 홍대 언저리(서울 서북부)를 생각.
  • 날짜는 1월 11일 또는 25일 오후를 생각, 대관을 위해 8일까지만 신청받겠음
  • 시간은 3–4시간을 생각하고 있는데, 당연히 변동될 수 있다. 만약 시간이 길어져서 1회차로 안끝나면 이어지는 내용은 추가 비용 없이 그냥 해주겠음.
  • 참가 인원은 적을 수록 좋다. 5–6명이면 좋고, 많아도 10명 이하로 생각. 수십명이 한 강의실에서 강의 따라하는 것이 얼마나 비효율적인지 이미 학생때부터 경험했기 때문. 그리고 개발 배경 없어도 된다 (제일 중요 !!!), 나도 없지만 해냈다.
그렇다고 너무 적으면 이상하다
  • 비용: 4만원, 두명이 같이 신청하면 7만원. (최저시급 4시간으로 퉁침) 처음이니까 그렇고 나중에는 더 올릴 수 있다.
  • 필요한 것: 개인 노트북 (나머지는 그날 해도 된다)
  • 신청은 구글폼으로

--

--

Responses (1)