꿈에서 탄생한 웹 앱을 현실로 구현한 경험

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, 창의적 프로젝트에 관심 있는 개발자
• Flask 프레임워크 기초를 배우고 싶은 초보자
• UX 디자인과 사용자 행동 분석에 관심 있는 개발자

핵심 요약

• "Whispers" 앱 개발: 사용자에게 직관적인 네비게이션 없이 경로 추측을 요구하는 독특한 UX 디자인
• Flask 기반 구현: @app.route 기반의 동적 라우팅, session을 이용한 상태 관리
• 기술적 성과: 시간 기반 로직, 자바스크립트 없는 풀 세션 기반 라우팅 게임 구현

섹션별 세부 요약

1. 앱의 개념과 목적

• 비논리적 UX 디자인: 홈페이지, 네비게이션 없이 경로 추측만을 통해 사용자와 상호작용
• 404 void 기능: 잘못된 입력 시 빨간 점 크기 증가로 사용자 오류를 시각화
• 사용자 탐험 유도: 모호한 메시지와 시간 기반 조건으로 사용자 행동 분석

2. Flask 기반 구현

• 라우팅 규칙:

```python

@app.route('/gate', methods=['GET'])

def gate():

session['entered'] = True

return render_template('gate.html')

```

• 세션 기반 접근 제어:

```python

if key == 'murmur' and now.minute == 0:

session['drift'] = True

return redirect('/drift')

```

• 동적 경로 생성:

```python

for r in mystery_routes:

app.add_url_rule(r, r, lambda r=r: render_template('mystery.html', clue=r))

```

3. 사용자 상호작용 디자인

• 자바스크립트 없이 세션 기반 라우팅:

```html

const dot = document.getElementById("dot");

let size = Number(localStorage.getItem("dotSize") || 10);

size += 5;

localStorage.setItem("dotSize", size);

```

• 7회 성공 시 앱 종료: 세션 초기화, 경로 비활성화, 빨간 점 리셋

4. GitHub 프로젝트 정리 및 마케팅

• 7,000개 Hacker News 프로젝트 CSV 제공:

- 6개월 내 게시된 프로젝트

- SaaS, AI 도구, 크롬 확장 프로그램 등 포함

• 가격 및 특징:

- $7 단일 가격, 무제한 다운로드

- 비정렬 CSV 제공, 커뮤니티 추천 기반

결론

• 창의성 훈련: 비논리적 UX 디자인을 통해 사용자 행동 예측과 시간 기반 로직을 학습
• Flask 고급 기능: 동적 라우팅, 세션 관리, 자바스크립트 없는 구현
• 실무 적용: GitHub 프로젝트 CSV를 통해 AI SaaS, 크롬 확장 프로그램 등 성공 사례를 분석 및 클론 가능