러닝 기록 앱

러닝 기록 앱은 폰으로 달린 거리·시간·페이스·경로를 그때그때 남기고, 로그인한 사람에게 자기 기록만 보여 주는 모바일 앱입니다. 달리기를 마치면 오늘 기록이 목록에 쌓이고, 다른 사람의 기록은 서로 보이지 않습니다.

이 예제가 보여 주는 것은 하나입니다. 웹 서비스에 쓰던 것과 똑같은 백엔드를 모바일 앱이 그대로 씁니다. 기록을 담고, 회원을 받고, 자기 기록만 보이게 하는 일은 웹이든 앱이든 다르지 않습니다. 그래서 이 예제도 그 백엔드(기록을 담는 데이터, 회원 로그인, 자기 기록만 보는 권한)를 갖추는 과정을 처음부터 끝까지 보여 주고, 모바일이라 달라지는 두 가지, 배포와 로그인 결과를 앱으로 받아오는 연결만 따로 짚습니다.

무엇을 만드나

옷가게나 블로그 대신, 이번 예시는 개인용 러닝 기록 앱입니다. 화면은 세 가지로 잡습니다.

• 로그인 화면: 구글로 로그인합니다.
• 기록 목록: 로그인한 사람이 지금까지 남긴 러닝 기록을 최근 순으로 봅니다.
• 기록 추가: 달린 거리·시간·페이스·경로·날짜를 남깁니다.

핵심은 "각자 자기 기록만 본다"입니다. 로그인한 사람에게는 그 사람이 남긴 기록만 전달되고, 남의 기록은 보이지 않습니다. 이 조건이 뒤에서 회원 로그인과 권한을 함께 필요하게 만듭니다.

화면을 먼저 만들고 연동하기

이 앱을 직접 만드는 길은 두 걸음입니다. 앱 화면을 먼저 만들고, 그다음 그 화면 뒤를 WEEGLOO에 맡깁니다.

1. 화면 디자인 만들기. 위 화면들은 LLM에게 아래 같은 프롬프트를 주어 뽑았습니다. 무엇을 만드는 앱인지 한 줄, 화면 목록과 각 화면에 담을 내용, 디자인 방향을 적어 주면 됩니다.

러닝 기록 앱의 화면을 디자인해 줘. 세로 모바일 앱이다.

화면:

• 로그인: 앱 소개 한 줄과 "구글로 계속하기" 버튼.
• 기록 목록(홈): 총 거리·러닝 횟수 요약, 러닝 기록 카드 리스트(날짜·거리·시간·페이스·경로 썸네일), 기록 추가 버튼.
• 기록 추가: 날짜·거리·시간·페이스·메모·경로 사진 입력과 저장.

깔끔하고 활동적인 느낌으로, 거리·페이스 같은 수치가 한눈에 읽히게. 모바일 UI 관례를 따른다.

위 "무엇을 만드나"의 세 화면이 이 프롬프트로 나온 결과입니다. 아직 데이터도 로그인도 없는, 화면뿐인 상태입니다.

2. WEEGLOO에 연동하기. 에이전트를 WEEGLOO에 연결하고(연결하기) 이렇게 말합니다.

WEEGLOO와 연동해줘.

무엇을 만드는지 길게 설명하지 않아도, 에이전트가 이 화면들을 살펴 화면 뒤에 필요한 것을 갖춥니다. 통째로 맡기는 이 흐름은 한마디로 연동하기와 같습니다.

화면 뒤에 WEEGLOO가 갖추는 것

"연동해줘" 한마디에 에이전트가 화면을 보고 갖추는 것은 이 네 가지입니다. 화면 뒤에서 WEEGLOO가 맡는 백엔드입니다.

1. 러닝 기록을 담을 데이터 틀(Content Type). 거리·시간·페이스·경로·날짜 같은 항목을 담습니다.
2. 구글 로그인(ServiceLogin). 앱 사용자가 직접 가입하고 로그인하게 합니다.
3. "자기 기록만" 권한. 로그인한 사람이 남긴 기록만 그 사람이 읽고 쓰고 지우게 합니다.
4. 자기 기록 전달. 로그인한 사람에게 그 사람의 기록만 목록으로 내려보냅니다.

이 네 가지는 같은 서비스를 웹으로 만들 때 필요한 것과 똑같습니다. 각 조각을 따로 다루는 법은 회원 가입과 로그인 붙이기·권한 나누기·데이터를 저장하고 꺼내 쓰기에서 하나씩 다룹니다. 경로 지도 이미지나 사진을 함께 남기고 싶으면 파일(Media)을 붙일 수도 있습니다.

실제로 만들어진 것

아래는 이 예제의 Stride Space에 실제로 만들어져 있는 리소스입니다. 하나하나 설정하는 법이 아니라, "연동해줘"의 결과로 이 앱에 무엇이 생겼는지를 봅니다.

러닝 기록을 담는 틀

첫 번째는 러닝 기록을 담는 틀(Content Type) "Run"입니다. 러닝 한 건에 담기는 값이 항목별 칸으로 나뉘어 있습니다.

평균 페이스는 따로 저장하는 칸이 없습니다. 거리와 시간만 있으면 나오는 값이라, 앱이 그때그때 계산해 보여 줍니다(기록 추가 화면의 "auto-calculated").

구글 로그인

두 번째는 회원이 구글로 로그인하는 통로(ServiceLogin)입니다. 이 예제에서는 이름을 "Stride"로 두고, 로그인 방식은 구글 하나만 켰습니다. 새로 로그인한 사람은 기본으로 아래 "Runner" 권한을 받습니다. 로그인이 끝나면 그 결과가 로그인 결과를 앱으로 받아오기에서 말한 중간 다리 페이지를 거쳐 앱으로 돌아옵니다.

"자기 기록만" 권한

세 번째는 회원이 받는 권한(ServiceUserRole) "Runner"입니다. 규칙은 이렇습니다.

"읽기"가 "자기가 만든 것만"으로 묶여 있어서, 목록에는 각자 자기 기록만 뜹니다. 앞서 말한 네 가지 중 3번(권한)과 4번(전달)이 사실 이 한 규칙에서 함께 나옵니다. 회원마다 읽히는 기록이 자기 것뿐이니, 그게 곧 그 사람에게 전달되는 목록입니다.

기록과 사진

네 번째는 러닝 기록 하나하나(Content)와 경로 사진(Media)입니다. 이 둘은 미리 만들어 두는 게 아니라, 회원이 앱에서 러닝을 남길 때 그 사람 이름으로 하나씩 만들어집니다. 아래는 실제로 남긴 기록 한 건입니다. 앞의 "Run" 틀에 값이 채워지고, 경로 사진이 함께 붙어 있습니다.

거리 42.195는 마라톤 풀코스입니다. 시간은 초 단위로 담기고(여기서는 3시간 53분짜리 기록), 앱에서는 3:53:00처럼 보여 줍니다. 경로 사진은 파일(Media)로 따로 저장되고, 기록에는 그 파일을 가리키는 연결만 담깁니다. "무엇을 만드나"의 목록·카드가 이런 기록이 여러 건 쌓인 모습입니다.

웹과 다른 두 가지

여기까지는 웹과 똑같습니다. 같은 백엔드를 모바일 앱이 그대로 씁니다. 모바일이라 달라지는 것은 두 가지뿐입니다.

배포: 앱 마켓은 WEEGLOO 밖

웹 서비스는 완성한 것을 Web Hosting으로 인터넷에 올릴 수 있지만(사이트를 인터넷에 올리기), 완성한 모바일 앱을 사람들 손에 전달하는 일(앱 마켓 등록)은 WEEGLOO 밖에서 이루어집니다. WEEGLOO가 맡는 것은 앱 화면 뒤의 데이터·회원·권한입니다.

로그인 결과를 앱으로 받아오기

로그인 기능 자체는 웹과 같은 방식으로 붙습니다. 다만 로그인이 끝난 뒤 그 결과를 앱으로 돌려받는 연결이 웹과 다릅니다. 로그인 결과는 웹 주소로만 돌아올 수 있어, 그 결과를 앱으로 넘겨 주는 중간 다리 역할의 페이지가 한 단계 필요합니다. 이 기술 단계는 Auth API에서 다룹니다.

자기 기록만 되는지 보기

이 앱의 핵심 조건, "각자 자기 기록만 본다"가 실제로 지켜집니다. 아래는 서로 다른 두 계정으로 같은 앱을 연 홈 화면입니다. 같은 앱이지만 총 거리도, 러닝 수도, 목록에 뜨는 기록도 다릅니다.

한 계정에는 5km 한 건만, 다른 계정에는 마라톤과 3km 두 건만 뜹니다. 서로의 기록은 상대에게 보이지 않습니다. Stride에는 이 세 건이 모두 담겨 있지만(실제로 만들어진 것 참조), 각 회원에게는 자기가 남긴 기록만 전달됩니다. 앞의 "자기 기록만" 권한에서 읽기를 "자기가 만든 것만"으로 묶어 둔 결과입니다.

다음으로 할 일

• 회원 가입과 로그인 붙이기: 자체 회원을 받는 로그인을 따로 붙이는 법을 다룹니다.
• Auth API: 로그인 결과를 앱으로 받아오는 기술 단계를 다룹니다.
• 권한 나누기: 회원이 자기 것만 다루도록 권한을 정하는 법을 다룹니다.
• 데이터를 저장하고 꺼내 쓰기: 데이터 틀을 만들고 내용을 채우는 법을 다룹니다.