러닝 기록 서비스

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

이 예제가 보여 주는 것은 하나입니다. 폰 앱과 웹, 두 화면이 하나의 WEEGLOO 백엔드를 함께 씁니다. 그래서 이 페이지는 앱과 웹이 함께 쓰는 백엔드를 먼저 보고, 그다음 앱과 웹 중 관심 있는 쪽으로 갈라집니다. 어느 쪽을 골라도 백엔드는 같습니다. 그게 요점입니다.

무엇을 만드나

옷가게나 블로그 대신, 이번 예시는 개인용 러닝 기록 서비스입니다. 폰 앱과 웹, 두 화면으로 같은 기록을 봅니다. 앱 화면은 세 가지로 잡습니다.

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

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

관심 있는 쪽으로 바로 가도 됩니다. 폰 앱을 만드는 쪽은 앱으로 쓰기를, 웹을 만드는 쪽은 웹으로 쓰기를 보세요. 다만 그 아래 "화면 뒤 백엔드"는 앱이든 웹이든 공통이라, 먼저 훑어 두면 두 갈래가 잘 이어집니다.

화면 뒤 백엔드 (앱·웹 공통)

화면을 만들어 연결한 에이전트에게 "WEEGLOO와 연동해줘"라고 하면(연결하기·한마디로 연동하기), 에이전트가 화면을 살펴 화면 뒤에 필요한 것을 갖춥니다. 러닝 기록을 담을 데이터 양식(Content Type), 구글 로그인(ServiceLogin), "자기 것만" 권한(ServiceUserRole), 그리고 그 권한에 따라 회원마다 자기 기록만 내려보내는 전달입니다. 이 백엔드는 앱 화면으로 시작하든 웹 화면으로 시작하든 같고, 앱과 웹이 그대로 함께 씁니다. 각 조각을 따로 다루는 법은 회원 가입과 로그인 붙이기·권한 나누기·데이터를 저장하고 꺼내 쓰기에서 하나씩 다룹니다.

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

러닝 기록을 담는 양식

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

항목	칸 종류	필수	담는 값
`Date`	Date	필수	달린 날짜. 목록에서 기록을 가리키는 제목으로도 쓰입니다.
`Distance (km)`	Number	필수	달린 거리(킬로미터). 소수점까지 넣습니다.
`Duration (seconds)`	Integer	필수	걸린 시간(초 단위). 화면에서는 `41:05`처럼 분·초로 보여 줍니다.
`Notes`	Long Text	선택	그날 러닝 메모.
`Route photo`	Media	선택	경로 지도나 사진 파일 한 장.

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

두 번째는 회원이 구글로 로그인하는 통로(ServiceLogin)입니다. 이 예제에서는 이름을 "Stride"로 두고, 로그인 방식은 구글 하나만 켰습니다. 새로 로그인한 사람은 기본으로 아래 "Runner" 권한을 받습니다. 로그인이 끝나면 그 결과가 화면으로 돌아오는데, 돌아오는 방식이 앱과 웹에서 조금 다릅니다. 그 차이는 앱으로 쓰기와 웹으로 쓰기에서 각각 다룹니다.

"자기 기록만" 권한

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

할 수 있는 일	적용 범위
기록 만들기	로그인한 회원 누구나
기록 읽기	자기가 만든 것만
기록 수정	자기가 만든 것만
기록 삭제	자기가 만든 것만

"읽기"가 "자기가 만든 것만"으로 묶여 있어서, 목록에는 각자 자기 기록만 뜹니다. 회원마다 읽히는 기록이 자기 것뿐이니, 그게 곧 그 사람에게 전달되는 목록입니다. 이 규칙은 앱이든 웹이든 똑같이 적용됩니다.

기록과 사진

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

거리 42.195는 마라톤 풀코스입니다. 시간은 초 단위로 담기고(여기서는 3시간 53분짜리 기록), 화면에서는 3:53:00처럼 보여 줍니다. 경로 사진은 파일(Media)로 따로 저장되고, 기록에는 그 파일을 가리키는 연결만 담깁니다.

앱으로 쓰기

먼저 폰 앱입니다. 앱 화면을 만들고, 그 화면 뒤를 위 화면 뒤 백엔드로 채웁니다.

앱 화면 만들고 연동하기

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

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

화면:

로그인: 앱 소개 한 줄과 "구글로 계속하기" 버튼.

기록 목록(홈): 총 거리·러닝 횟수 요약, 러닝 기록 카드 리스트(날짜·거리·시간·페이스·경로 썸네일), 기록 추가 버튼.

기록 추가: 날짜·거리·시간·페이스·메모·경로 사진 입력과 저장.

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

이렇게 나온 화면은 아직 데이터도 로그인도 없는, 화면뿐인 상태입니다.

2. WEEGLOO에 연동하기. 에이전트를 WEEGLOO에 연결하고 "WEEGLOO와 연동해줘"라고 하면, 에이전트가 이 화면들을 살펴 위 화면 뒤 백엔드를 갖춥니다.

앱이라 챙길 두 가지

백엔드는 웹으로 만들 때와 똑같습니다. 앱이라서 챙길 게 두 가지 있습니다.

배포: 완성한 모바일 앱을 사람들 손에 전달하는 일(앱 마켓 등록)은 WEEGLOO 밖에서 이루어집니다. WEEGLOO가 맡는 것은 앱 화면 뒤의 데이터·회원·권한입니다. (웹은 앱 마켓이 없습니다. 웹으로 쓰기에서 다룹니다.)
로그인 콜백: 로그인이 끝난 뒤 그 결과를 앱으로 돌려받는 연결이 웹과 다릅니다. 로그인 결과는 웹 주소로만 돌아올 수 있어, 그 결과를 앱으로 넘겨 주는 중간 다리 역할의 페이지가 한 단계 필요합니다. 이 기술 단계는 Auth API에서 다룹니다.

자기 기록만 되는지 보기

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

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

웹으로 쓰기

웹은 앱과 같은 백엔드를 그대로 씁니다. 위 화면 뒤 백엔드를 웹이 읽어 같은 기록을 보여 줍니다.

웹 화면 만들고 연동하기

웹도 앱과 같은 두 걸음입니다.

1. 웹 화면 디자인 만들기. 앱과 마찬가지로 LLM에게 아래 같은 프롬프트를 주어 웹 화면을 뽑습니다. 담는 내용은 앱과 같고, 넓은 화면에 맞춘 웹 레이아웃으로 바꿉니다.

러닝 기록 웹 화면을 디자인해 줘. 데스크톱 웹이다.

화면:

로그인: 서비스 소개 한 줄과 "구글로 계속하기" 버튼.

기록 목록(대시보드): 총 거리·러닝 횟수·평균 페이스 요약, 러닝 기록 목록(날짜·거리·시간·페이스·경로 썸네일), 기록 추가 버튼.

기록 추가: 날짜·거리·시간·페이스·메모·경로 사진 입력과 저장.

넓은 화면을 살린 레이아웃으로, 거리·페이스 같은 수치가 한눈에 읽히게. 웹 UI 관례를 따른다.

2. WEEGLOO에 연동하기. 연결한 에이전트에게 "이 웹도 WEEGLOO와 연동해줘"라고 합니다. 이미 앱을 만들었다면, 에이전트는 위 화면 뒤 백엔드를 다시 세우지 않고 그대로 잇습니다. 새로 만드는 WEEGLOO 리소스는 없습니다. 웹에서 새로 만드는 것은 웹 화면뿐입니다. (앱을 거치지 않고 웹부터 시작했다면 이때 그 백엔드가 처음 생기고, 나중에 앱을 더해도 마찬가지로 그대로 씁니다. 어느 쪽이든 백엔드는 같습니다.)

이 웹 화면은 자기 기록만 되는지 보기에 나온 계정(이번 달 45.2km, 마라톤 42.20km와 3km)을 웹에서 연 것입니다. 앱 홈과 총 거리·러닝 수·기록이 똑같습니다. 백엔드가 하나라, 앱이 보여 준 그 데이터를 웹이 데스크톱 화면으로 그대로 보여 줍니다.

웹이라 다른 두 가지

웹도 앱과 다른 점이 두 가지인데, 방향이 앱과 반대라 이번엔 챙길 게 오히려 적습니다.

배포: 웹은 앱 마켓이 필요 없습니다. 만든 웹 파일을 Web Hosting으로 바로 인터넷에 올립니다(사이트를 인터넷에 올리기).
로그인 콜백: 웹은 로그인 결과가 웹 주소로 바로 돌아옵니다. 앱에서 필요했던 중간 다리 페이지가 웹에는 없어도 됩니다.

권한은 그대로라, 웹에서도 회원마다 자기 기록만 보입니다. 위 "자기 기록만" 권한이 웹에도 똑같이 적용됩니다.

다음으로 할 일

회원 가입과 로그인 붙이기: 자체 회원을 받는 로그인을 따로 붙이는 법을 다룹니다.
Auth API: 로그인 결과를 앱으로 받아오는 기술 단계를 다룹니다.
권한 나누기: 회원이 자기 것만 다루도록 권한을 정하는 법을 다룹니다.
데이터를 저장하고 꺼내 쓰기: 데이터 양식을 만들고 내용을 채우는 법을 다룹니다.
사이트를 인터넷에 올리기: 웹을 Web Hosting으로 배포하는 법을 다룹니다.