WSL2부터 Lovable까지, Linux 학습 앱을 직접 만들어봤습니다

소개

저는 매년 1월부터 3월까지 공채 신입사원을 대상으로 인프라 교육 및 프로그래밍 언어 교육(Linux, Shell Script Programming, Database, WAS, Network, C/C++ Programming)을 진행하고 있습니다. Linux 교육을 진행하면서 PDF 형태의 교안을 확인하고 동시에 실습을 진행할 수 있는 환경이 있으면 좋겠다고 느꼈고, 이러한 교육 현장의 필요를 반영하여 해당 앱을 개발하게 되었습니다.

진행 방법

"Linux 학습 환경 애플리케이션" 기획 및 Lovable 프롬프트 생성(Claude)
WSL2 환경 구축 및 Ubuntu Linux 설치
ssh 환경 구성 및 테스트
Lovable 앱 개발
Cursor ai 앱 실행

1. "Linux 학습 환경 애플리케이션" 기획 및 Lovable 프롬프트 생성(Claude)

너는 Linux 전문가이자 PRD 작성전문가야. 나는 windows WSL2 환경에서 Ubuntu를 사용하고 싶어. 두 개의 화면이 있고 왼편에는 Linux 명령을 실행하면 결과가 나오고 오른편에는 내 교재 Linux pdf를 올려놓고 같이 실습하도록 진행되는 앱을 구현하고 싶어. PRD 작성해줘.

당신은 Lovable 프롬프트 전문가입니다. Lovable 프롬프트 작성해 주세요.

출력

WSL2 Ubuntu 사용자를 위한 듀얼 패널 데스크톱 학습 환경 웹 애플리케이션을 만들어주세요.

## 핵심 레이아웃
다음과 같은 반응형 분할 화면 인터페이스를 구축하세요:
- 왼쪽 패널: 터미널 에뮬레이터 (60% 너비)
- 오른쪽 패널: PDF 뷰어 (40% 너비)
- 패널 사이에 드래그 가능한 크기 조절 바를 추가하여 너비 비율 조정 가능
- 상단 메뉴바: 파일, 보기, 세션, 설정 옵션 포함
- 하단 상태바: 터미널 라인 수와 PDF 페이지 번호 표시

## 왼쪽 패널 - 터미널 에뮬레이터
xterm.js를 사용한 웹 기반 터미널 구현:
- 검은 배경에 초록색 텍스트의 다크 테마 터미널 표시
- 명령 프롬프트 표시: "user@ubuntu:~$"
- 텍스트 입력 및 출력 시뮬레이션 지원
- 스크롤 가능한 명령어 히스토리
- 복사/붙여넣기 기능 (Ctrl+Shift+C/V)
- 오른쪽 상단에 터미널 지우기 버튼
- 상태바에 라인 번호 표시
- 데모 목적으로 일반적인 Linux 명령어(ls, cd, pwd, cat 등)를 실제와 같은 출력으로 시뮬레이션

## 오른쪽 패널 - PDF 뷰어
다음 기능을 가진 PDF 뷰어 인터페이스 생성:
- PDF 파일을 로드하기 위한 파일 업로드 버튼
- 스크롤 지원되는 PDF 렌더링 영역
- 네비게이션 컨트롤:
  - 이전/다음 페이지 버튼
  - 페이지 번호 입력 필드 (현재/전체)
  - 확대/축소 버튼 (+/-)
  - 너비/페이지에 맞춤 토글
- 현재 페이지를 저장하는 북마크 버튼 (별 아이콘)
- 검색 기능 (Ctrl+F)
- 페이지 미리보기를 보여주는 썸네일 사이드바 (접을 수 있음)

## 상단 메뉴바
다음 드롭다운 메뉴 포함:
- 파일: PDF 열기, 최근 파일, 히스토리 내보내기, 종료
- 보기: 확대/축소 컨트롤, 전체화면 토글, 테마 (라이트/다크)
- 세션: 세션 저장, 세션 불러오기, 세션 히스토리
- 설정: 터미널 환경설정, PDF 환경설정, 키보드 단축키

## 구현할 기능들

### 터미널 기능
- 명령어 히스토리 탐색 (위/아래 화살표)
- 자동완성 시뮬레이션 (Tab 키)
- 텍스트 선택 및 복사
- 일반 명령어에 대한 구문 강조
- 출력 색상 코딩 (에러는 빨강, 성공은 초록)
- 명령어 타임스탬프 표시 옵션
- 히스토리를 TXT 파일로 내보내기

### PDF 뷰어 기능
- 드래그 앤 드롭 PDF 파일 업로드
- 메모와 함께 페이지 북마크
- 북마크 목록 사이드바
- 하이라이트가 있는 PDF 텍스트 검색
- 확대/축소 레벨: 50%, 75%, 100%, 125%, 150%, 200%
- 맞춤 옵션: 너비에 맞춤, 페이지에 맞춤, 실제 크기
- 키보드 탐색 (PageUp/PageDown)

### 세션 관리
- 현재 상태 저장 (PDF 페이지, 터미널 히스토리, 레이아웃 비율)
- 목록에서 이전 세션 불러오기
- 5분마다 자동 저장
- 타임스탬프가 있는 세션 목록

## 스타일링 요구사항
- 둥근 모서리가 있는 현대적이고 깔끔한 인터페이스
- 기본 다크 테마, 라이트 테마 옵션 제공
- 스타일링은 Tailwind CSS 사용
- 색상 구성:
  - 터미널: #1e1e1e 배경, #00ff00 텍스트
  - PDF 뷰어: #2d2d2d 배경
  - 패널: #252525 배경
  - 강조색: #4a9eff
- 모든 상호작용에 부드러운 전환 효과
- 반응형 디자인 (최소 1280px 너비 권장)

## 상호작용성
- 드래그 핸들로 부드러운 패널 크기 조절
- 모든 버튼에 호버 효과
- PDF 렌더링을 위한 로딩 상태
- 작업에 대한 토스트 알림 (파일 저장됨, 세션 로드됨 등)
- 호버 시 키보드 단축키 힌트
- 터미널과 PDF를 위한 컨텍스트 메뉴 (오른쪽 클릭)

## 데모 데이터
샘플 데이터 포함:
- 일반적인 Linux 명령어가 미리 로드된 터미널 히스토리
- 샘플 북마크 항목
- 일반적인 학습 시나리오를 보여주는 기본 세션
- PDF 플레이스홀더 메시지: "Linux 튜토리얼 PDF를 열거나 여기에 드래그 앤 드롭하세요"

## 기술 구현
- TypeScript와 함께 React 사용
- 터미널 에뮬레이션을 위해 xterm.js 구현
- PDF 렌더링을 위해 react-pdf 또는 pdf.js 사용
- React hooks(useState, useContext)로 상태 관리
- 세션 및 설정을 위한 로컬 스토리지
- 크기 조절 가능한 레이아웃을 위한 분할 패널 컴포넌트

## 추가 UI 요소
- 빠른 작업을 위한 플로팅 액션 버튼 (세션 저장, 히스토리 내보내기)
- 키보드 단축키 도움말 모달 ('?' 눌러서 열기)
- 첫 실행 시 기능 투어가 있는 환영 화면
- PDF 로딩을 위한 진행률 표시기
- 터미널의 명령어 제안 드롭다운

교재를 읽으면서 명령어를 연습하고 싶어하는 Linux 학습자를 위해 시각적으로 매력적이고, 기능이 풍부하며, 직관적으로 만들어주세요.

2. WSL2 환경 구축 및 Ubuntu Linux 설치

powershell 관리자 권한으로 실행
wsl --install 실행
컴퓨터 재부팅
컴퓨터 재부팅 후 Ubuntu 자동 설치
설치 확인

3. ssh 환경 구성 및 테스트

ssh 서버 설치하기
```
sudo apt install -y openssh-server
```

ubuntu server ip 확인하기

ifconfig

eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 172.29.113.224  netmask 255.255.240.0  broadcast 172.29.127.255
        inet6 fe80::215:5dff:fe55:714d  prefixlen 64  scopeid 0x20<link>
        ether 00:15:5d:55:71:4d  txqueuelen 1000  (Ethernet)
        RX packets 1082887  bytes 1547188617 (1.5 GB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 197564  bytes 18321442 (18.3 MB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

ifconfig 명령 없다면 다음 명령 실행 후 설치
```
sudo apt update
sudo apt install net-tools
```
putty 접속 테스트
다운로드 페이지 : https://putty.org/index.html

접속여부 테스트(login as: 문자 나와야 됨)

4. Lovable 앱 개발

WSL2 Ubuntu 사용자를 위한 듀얼 패널 데스크톱 학습 환경 웹 애플리케이션을 만들어주세요.

## 핵심 레이아웃
다음과 같은 반응형 분할 화면 인터페이스를 구축하세요:
- 왼쪽 패널: 터미널 에뮬레이터 (60% 너비)
- 오른쪽 패널: PDF 뷰어 (40% 너비)
- 패널 사이에 드래그 가능한 크기 조절 바를 추가하여 너비 비율 조정 가능
- 상단 메뉴바: 파일, 보기, 세션, 설정 옵션 포함
- 하단 상태바: 터미널 라인 수와 PDF 페이지 번호 표시

## 왼쪽 패널 - 터미널 에뮬레이터
xterm.js를 사용한 웹 기반 터미널 구현:
- 검은 배경에 초록색 텍스트의 다크 테마 터미널 표시
- 명령 프롬프트 표시: "user@ubuntu:~$"
- 텍스트 입력 및 출력 시뮬레이션 지원
- 스크롤 가능한 명령어 히스토리
- 복사/붙여넣기 기능 (Ctrl+Shift+C/V)
- 오른쪽 상단에 터미널 지우기 버튼
- 상태바에 라인 번호 표시
- 데모 목적으로 일반적인 Linux 명령어(ls, cd, pwd, cat 등)를 실제와 같은 출력으로 시뮬레이션

## 오른쪽 패널 - PDF 뷰어
다음 기능을 가진 PDF 뷰어 인터페이스 생성:
- PDF 파일을 로드하기 위한 파일 업로드 버튼
- 스크롤 지원되는 PDF 렌더링 영역
- 네비게이션 컨트롤:
  - 이전/다음 페이지 버튼
  - 페이지 번호 입력 필드 (현재/전체)
  - 확대/축소 버튼 (+/-)
  - 너비/페이지에 맞춤 토글
- 현재 페이지를 저장하는 북마크 버튼 (별 아이콘)
- 검색 기능 (Ctrl+F)
- 페이지 미리보기를 보여주는 썸네일 사이드바 (접을 수 있음)

## 상단 메뉴바
다음 드롭다운 메뉴 포함:
- 파일: PDF 열기, 최근 파일, 히스토리 내보내기, 종료
- 보기: 확대/축소 컨트롤, 전체화면 토글, 테마 (라이트/다크)
- 세션: 세션 저장, 세션 불러오기, 세션 히스토리
- 설정: 터미널 환경설정, PDF 환경설정, 키보드 단축키

## 구현할 기능들

### 터미널 기능
- 명령어 히스토리 탐색 (위/아래 화살표)
- 자동완성 시뮬레이션 (Tab 키)
- 텍스트 선택 및 복사
- 일반 명령어에 대한 구문 강조
- 출력 색상 코딩 (에러는 빨강, 성공은 초록)
- 명령어 타임스탬프 표시 옵션
- 히스토리를 TXT 파일로 내보내기

### PDF 뷰어 기능
- 드래그 앤 드롭 PDF 파일 업로드
- 메모와 함께 페이지 북마크
- 북마크 목록 사이드바
- 하이라이트가 있는 PDF 텍스트 검색
- 확대/축소 레벨: 50%, 75%, 100%, 125%, 150%, 200%
- 맞춤 옵션: 너비에 맞춤, 페이지에 맞춤, 실제 크기
- 키보드 탐색 (PageUp/PageDown)

### 세션 관리
- 현재 상태 저장 (PDF 페이지, 터미널 히스토리, 레이아웃 비율)
- 목록에서 이전 세션 불러오기
- 5분마다 자동 저장
- 타임스탬프가 있는 세션 목록

## 스타일링 요구사항
- 둥근 모서리가 있는 현대적이고 깔끔한 인터페이스
- 기본 다크 테마, 라이트 테마 옵션 제공
- 스타일링은 Tailwind CSS 사용
- 색상 구성:
  - 터미널: #1e1e1e 배경, #00ff00 텍스트
  - PDF 뷰어: #2d2d2d 배경
  - 패널: #252525 배경
  - 강조색: #4a9eff
- 모든 상호작용에 부드러운 전환 효과
- 반응형 디자인 (최소 1280px 너비 권장)

## 상호작용성
- 드래그 핸들로 부드러운 패널 크기 조절
- 모든 버튼에 호버 효과
- PDF 렌더링을 위한 로딩 상태
- 작업에 대한 토스트 알림 (파일 저장됨, 세션 로드됨 등)
- 호버 시 키보드 단축키 힌트
- 터미널과 PDF를 위한 컨텍스트 메뉴 (오른쪽 클릭)

## 데모 데이터
샘플 데이터 포함:
- 일반적인 Linux 명령어가 미리 로드된 터미널 히스토리
- 샘플 북마크 항목
- 일반적인 학습 시나리오를 보여주는 기본 세션
- PDF 플레이스홀더 메시지: "Linux 튜토리얼 PDF를 열거나 여기에 드래그 앤 드롭하세요"

## 기술 구현
- TypeScript와 함께 React 사용
- 터미널 에뮬레이션을 위해 xterm.js 구현
- PDF 렌더링을 위해 react-pdf 또는 pdf.js 사용
- React hooks(useState, useContext)로 상태 관리
- 세션 및 설정을 위한 로컬 스토리지
- 크기 조절 가능한 레이아웃을 위한 분할 패널 컴포넌트

## 추가 UI 요소
- 빠른 작업을 위한 플로팅 액션 버튼 (세션 저장, 히스토리 내보내기)
- 키보드 단축키 도움말 모달 ('?' 눌러서 열기)
- 첫 실행 시 기능 투어가 있는 환영 화면
- PDF 로딩을 위한 진행률 표시기
- 터미널의 명령어 제안 드롭다운

교재를 읽으면서 명령어를 연습하고 싶어하는 Linux 학습자를 위해 시각적으로 매력적이고, 기능이 풍부하며, 직관적으로 만들어주세요.

왼쪽 패널에 있는 부분은 에뮬레이터가 아니라 putty와 같은 터미널로 ssh를 이용해서 Ubuntu에 직접 접속하고 싶어. 다시 수정해줘.

SSH 구현: Lovable Cloud 사용
연결 설정: 연결 프로필 저장

"새 연결"에는 저장 버튼이 없어. 저장 버튼을 클릭하면 "저장된 프로필"에 나타나게 해야되. 호스트는 127.0.0.1로 접속해야 되. 가능하다면 local에서 해당 앱을 다운로드 받아서 실행하고 싶어. 다시 수정해줘.

github 연동 후 레포지토리르 클론하고 실행을 했어. 그런데 아래와 같은 에러가 발생해..
[email protected]:22에 연결 중... 오류: Connection failed: Connection refused (os error 111)

엣지 펑션과 Supabase 데이터베이스는 사용하지 않을거야. 저장소는 파일로 사용해줘. 그리고 앱을 로컬에 설치해서 WSL2에 설치된 Ubuntu IP인 172.29.113.224로 ssh를 포트 22를 사용해서 바로 접속해야되. 다시 수정해줘.

SSH 연결에서 비밀번호 라벨과 텍스트 박스는 삭제해줘.

버튼이 보이지 않아. 버튼 보이게 수정해줘.

Github push

5. Cursor ai 앱 실행

Github

git clone https://github.com/JwaSeongHoon/study-mate-hub.git

Cursor AI 실행
```
cd C:\workspace\study-mate-hub
cursor .
```

APP 실행

# Terminal 1
cd local-ssh-proxy
npm install
npm start

# Terminal 2
npm install
npm run dev

첫 화면
- SSH 연결 정보 등력
등록된 정보 선택 > 패스워드 입력 > Ubuntu 리눅스 서버 ssh 접속

오른쪽 화면 : PDF 리눅스 교안 업로드
왼쪽 화면 : 교안 보면서 리눅스 명령어 실습 진행

결과와 배운 점

본 과정을 통해 WSL2 기반의 Ubuntu 환경과 웹 애플리케이션을 연계하여, 교안(PDF)을 확인하면서 동시에 Linux 실습을 진행할 수 있는 학습 환경을 구현하였습니다. Lovable 프롬프트와 PRD를 활용함으로써, 비교적 복잡한 교육용 애플리케이션 구조도 짧은 시간 안에 구체적인 기능과 화면 구성으로 정리할 수 있음을 확인할 수 있었습니다.

또한 교육용 시스템을 구현하는 과정에서 네트워크 구성, SSH 접속, 포트 설정과 같은 인프라 기초 지식이 필수적이라는 점을 체감하였으며, 이는 단순한 애플리케이션 개발을 넘어 실습 환경의 안정성과 직결된다는 것을 알게 되었습니다. GitHub와 Cursor AI를 활용한 개발 흐름을 통해 기획부터 개발, 실행에 이르기까지 전반적인 작업 속도를 크게 단축할 수 있었고, Supabase와 같은 외부 서비스 의존을 제거하고 로컬 파일 기반 구조로 전환하면서 시스템을 단순화하는 것이 유지보수와 확장성 측면에서 매우 중요하다는 점을 배우는 계기가 되었습니다.

AI의 파도, 함께하면 이뤄낼 수 있어요! 22기 스터디 사전판매 시작 🚀