루비 온 레일즈로 나만의 홈페이지를 만들어 보고자...

소개

루비온레일즈란 무엇인가?


⭐ 루비 온 레일즈(Ruby on Rails) — 초간단 요약

✅ 1. Rails가 뭐야?

웹사이트를 빠르고 쉽게 만들 수 있게 도와주는 도구(프레임워크)
Ruby라는 언어로 만든 “웹 개발의 자동화 셋트”.


✅ 2. 왜 쓰는 거야?

  • 빠르게 개발 가능 (필요한 기능 대부분 자동 제공)

  • 규칙만 따르면 됨 (설정이 거의 필요 없음)

  • DB 작업도 쉬움 (SQL 대신 Ruby 코드로 처리)

  • 확장 기능 많음 (로그인, 업로드 등 Gem 설치 한 번이면 끝)


✅ 3. Rails로 만들 수 있는 것

  • 블로그, 쇼핑몰

  • 게시판, SNS

  • 회사 내부용 시스템

  • API 서버

  • 실시간 채팅
    ➡️ 웹으로 만드는 건 대부분 가능


✅ 4. 어떻게 돌아가?

  • Model: 데이터 (DB)

  • View: 화면

  • Controller: 둘을 연결

➡️ 이 3개(MVC)가 서로 역할 나눠서 깔끔하게 처리함.


✅ 5. Rails 한 줄 정의

“적은 코드로 빠르고 깔끔하게 웹을 만드는 프레임워크”


루비를 설치완료 후,

rails new my_app

<첫번째 프로젝트>

루비온레일즈를 통해 무엇을 만들지 확실하게 정해져 있지 않아서, 기존에 대충 만들다만 홈페이지를 보완해 보는게 좋겠다는 생각으로 시작했다. "경영컨설팅", "경영자문" 이라는 키워드로 찾아본 단순하지만, 평소에 보고 있던 유튜브의 채널을 따라 들어가 본 https://zenithtax.co.kr/Corporation 제니스 라는 홈페이지.
"이렇게 구조화하면, 나도 내 홈페이지를 훨씬 명확하게 보여줄 수 있겠다"는 생각이 들었다.

악수하는 여성의 웹사이트 스크린샷


기존 홈페이지 https://lbiz5785.com/를 돌아보며, 흐름과 설계의 부족함을 느꼈고,
기존 컨설팅 서비스에 AI라는 새로운 축을 더해
하나의 페이지로 서비스 가치를 명확히 전달하는 구조를 만들어 보고자 생각했다.

이것이 바로 나의 첫 루비 온 레일즈 실전 프로젝트의 사례이다.


진행 방법

1. 좋은 예시 해부하기

  • Zenithtax 페이지의 구성 방식 분석

  • 섹션별 흐름 파악: Hero → 공감 → 설명 → 신뢰 → CTA

레일즈로 이제부터 작업할거야. https://zenithtax.co.kr/Corporation 이 링크의 구조를 분석해줘. 이 구조를 참고해서 https://lbiz5785.com/ 이 홈페이지의 내용을 토대로 새로운 홈페이지를 만들 계획이야. 작업을 진행하기 전에 PRD를 만들고 프로젝트 플랜파일(세부실행파일)을 만들고, ToDo list 도 만들어서 docs 폴더에 넣어줘. 실행하지는 말고 문서만 만들어줘, 이거를 보고 작업을 진행할거야.

2. 내 서비스 다시 보기

  • 기존 사이트 내용 점검: 컨설팅 중심, 후기, 차별화, CTA

  • 새롭게 더하고 싶은 내용:

    • AI 경영 자문

    • AI 활용 기초 교육

    기존 내 홈페이지 있던 내용에 AI를 활용한 경영자문과 AI기본교육에 대한 내용도 넣어서 보완해줘.

3. 서비스 구조 재정리

  • 최종적으로 3가지 서비스 축으로 정리:

    1. 경영·세무·노무/법무 컨설팅

    2. AI 경영자문

    3. AI 활용 기초교육

4. 문서로 구상 구체화

  • 머릿속 생각을 꺼내어 문서화 시작

  • 작성 문서:

    • PRD.md: 목적, 대상, 섹션 구성 등 제품 요구사항

    • PROJECT_PLAN.md: 기획 → 와이어프레임 → 디자인 → 개발 → 콘텐츠 작성 → 테스트

    • TODO_LIST.md: 세부 작업 리스트

    • DOCS.md: 위 문서들을 정리한 인트로 문서

ToDo list 순서에 맞게 진행해줘. 
한국어로 된 웹사이트의 홈페이지

5. 카피라이팅 작업

  • 각 섹션별 문장 초안:

    • Hero: 어떤 문제를 가진 누구에게 무엇을 제공하는가

    • 공감 섹션: 경영자 고민을 정리한 공감 문장

    • 서비스 설명: 각 서비스가 어떤 상황에 필요한지

    • 후기: 실제 효과 사례

    • 마지막 CTA: "이제 당신의 차례입니다"

6. 루비 온 레일즈로 프로토타입 개발

  • Hero 섹션에 SVG 이미지 추가 (app/assets/images에 저장)

  • 이미지 처리 헬퍼 메서드 개발:

    • 반응형 이미지

    • 자동 프로필 아바타

    • 플레이스홀더 처리

  • 후기 섹션에 사용자 이니셜로 대체 프로필 기능 구현

한국사이트 스크린샷



< 두번째 프로젝트의 시도>

  • 18기 스터디 마지막날 여행가J님께 들었던 사례(옵시디언의 지식을 바탕으로 뉴스레터 만드는 앱)의 내용을 루비 온 레일즈에서 구현 해 보면 어떨까 하는 생각이 들었고, 실제 본인의 업무에 제일 활용도가 높은 작업을 적용시켜 보았다.

  • 옵시디언에 저장된 나만의 지식을 베이스로 하고, 이것을 클로드API를 접목하여 뉴스레터와 전자책으로 만들어 주는 웹앱을 만들어 보았다.

뉴스레터 자동 에이��전트 - 한국어

  • 뉴스레터와 전자책을 선택할 수 있는 옵션을 주고, 각각의 템플릿을 선택가능하게 하고, 카테고리별로 선택가능하게 구현하고자 한다.

한국어로 된 웹사이트의 홈페이지

한국어 웹사이트 스크린샷

결과와 배운 점

  1. 루비 온 레일즈 기반에서, 벤치마크를 통해 구조를 설계하는 방법을 배웠다.

  2. 루비 온 레이즈 프레임웤에서 좀 더 쉽게 진행되는 느낌도 받았다. (기존 작업에서 시행착오가 많았음)

  3. 아이디어를 문서로 풀어내는 힘을 길렀다. PRD, PLAN, TODO를 통해 협업이 쉬워졌다.

  4. 루비 온 레일즈로 실제 화면 구현을 하며 작은 기능을 완성하는 성취를 경험했다.

  5. 무엇보다 아이디어 → 구조화 → 문서화 → 구현(?) 해보는 경험을 해 봤다. 이후 풀스택을 위한 여정은

    계속되리라 생각한다.

  6. 하나의 프레임웤에서 풀스택을 구현할 수 있다는건 매우 큰 도움이 될 것이란 생각이 든다. 물론 장단점이 있겠지만, 이것도 각자의 선택이니 이마저도 큰 도움이 아니겠는가?


도움 받은 글

  • 이모카님의 사례 공유 내용 (n8n 자동화 워크플로우를 앱으로 자동화 하는 사례)

  • 여행가J님의 18기 스터디 사례

  • Zenithtax 홈페이지 – 구조와 흐름을 확인하고자 한 벤치마크

1
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요