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

소개

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

⭐ 루비 온 레일즈(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를 접목하여 뉴스레터와 전자책으로 만들어 주는 웹앱을 만들어 보았다.

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

결과와 배운 점

루비 온 레일즈 기반에서, 벤치마크를 통해 구조를 설계하는 방법을 배웠다.
루비 온 레이즈 프레임웤에서 좀 더 쉽게 진행되는 느낌도 받았다. (기존 작업에서 시행착오가 많았음)
아이디어를 문서로 풀어내는 힘을 길렀다. PRD, PLAN, TODO를 통해 협업이 쉬워졌다.
루비 온 레일즈로 실제 화면 구현을 하며 작은 기능을 완성하는 성취를 경험했다.
무엇보다 아이디어 → 구조화 → 문서화 → 구현(?) 해보는 경험을 해 봤다. 이후 풀스택을 위한 여정은
계속되리라 생각한다.
하나의 프레임웤에서 풀스택을 구현할 수 있다는건 매우 큰 도움이 될 것이란 생각이 든다. 물론 장단점이 있겠지만, 이것도 각자의 선택이니 이마저도 큰 도움이 아니겠는가?

도움 받은 글

이모카님의 사례 공유 내용 (n8n 자동화 워크플로우를 앱으로 자동화 하는 사례)
여행가J님의 18기 스터디 사례
Zenithtax 홈페이지 – 구조와 흐름을 확인하고자 한 벤치마크

🔥<24기 AI 스터디> 9/21 모집 마감 🔥