LearningFlow로 단계별 흐름 읽기
- LearningFlow는 한 단계에서 누가 무엇을 주고받고 무엇을 보관하는지 함께 보여 준다.
- 이전·다음이나 단계 선택으로 상태를 비교하며, 전체 흐름 보기로 모든 설명을 읽을 수 있다.
- AI에게는 코드 작성법 대신 구별하고 싶은 시점·전달 값·보관 상태를 요청한다.
이 장에서 처음 나오는 말2개
단계Step- 메시지 하나가 전달되거나 내부 처리 하나가 끝난 시점.
보관 상태- 해당 단계가 끝났을 때 각 주체가 갖고 있는 값과 아직 갖고 있지 않은 값.
화살표를 한꺼번에 보면 전체 연결은 알 수 있어도, “요청을 받은 순간 브라우저에도 문서가 있는가?”는 헷갈릴 수 있다. LearningFlow는 현재 단계의 메시지와 각 주체의 상태를 함께 읽게 하는 이 저장소의 학습 컴포넌트다.
예제를 직접 읽는다
섹션 제목: “예제를 직접 읽는다”아래 예제는 브라우저가 서버에 문서를 요청하고 응답받는 두 단계다. 캐시·실패·연결 설정을 생략한 설명용 사례이며, 버튼을 눌러도 실제 네트워크 요청은 발생하지 않는다.
요청을 보낸 뒤 응답이 도착하기까지
각 단계가 끝난 시점의 보관 상태입니다. 강조된 객체 사이의 화살표를 따라 전달 값을 읽으세요. 내부 처리는 같은 객체로 돌아옵니다.
그림에 나오는 값의 뜻
HTML- HyperText Markup Language. 브라우저가 페이지를 구성할 때 읽는 문서 형식.
구성 요소의 역할
- 브라우저
- 페이지를 요청하고 응답을 받는다.
- 서버
- 요청한 페이지의 문서를 반환한다.
처음에는 브라우저 아래에 문서 없음이 보인다. 다음 단계로 가면 화살표 방향과 전달 값이 바뀌고, 브라우저는 응답 문서 수신, 서버는 원본 문서 유지로 표시된다. 문서가 서버에서 없어지는 것이 아니라 브라우저에도 전달됐다는 차이를 읽는다.
조작하며 무엇을 비교하는가
섹션 제목: “조작하며 무엇을 비교하는가”| 조작 | 관찰할 것 |
|---|---|
| 다음 단계 | 화살표의 보내는 쪽·받는 쪽과 전달 값이 어떻게 달라지는가 |
| 이전 단계·처음으로 | 응답받기 전에는 브라우저에 문서가 없다는 상태로 돌아가는가 |
| 단계 바로 선택 | 앞 단계를 거치지 않아도 같은 시점의 상태를 읽을 수 있는가 |
화살표의 HTML 선택 | 그림에서 쓰는 낯선 값의 설명으로 이동하는가 |
| 전체 흐름 보기 | 단계별 상세 설명과 각 주체의 상태를 함께 읽을 수 있는가 |
첫 단계에서 서버는 문서를 갖고 있는데 브라우저에는 왜 없는가? 요청이 도착한 것과 응답이 도착한 것은 다른 사건이기 때문이다. 이 질문에 상태와 화살표를 짚어 답할 수 있다면 예제가 보여 주려는 차이를 읽은 것이다.
어떤 설명에 쓰는가
섹션 제목: “어떤 설명에 쓰는가”정적 다이어그램은 전체 구조와 경계를 참조할 때 좋다. LearningFlow는 시간 순서에 따라 전달 값과 보관 상태를 비교하는 질문에 쓴다. 실제 적용 사례는 Keycloak의 서버 앱 로그인이다.
현재 컴포넌트는 주체 2~4개, 단계당 메시지 하나 또는 내부 처리 하나를 순서대로 보여 준다. 실패 분기·시간에 따른 만료·실제 인증 결과를 계산하는 시뮬레이터는 아니다. 그런 조건까지 바꿔 보고 싶다면 별도 예제로 설계하도록 요청한다.
다른 페이지에 적용을 요청한다
섹션 제목: “다른 페이지에 적용을 요청한다”[페이지 URL]의 [절 제목]을 한 단계씩 볼 수 있게 수정해줘.[어느 시점]과 [다음 시점] 사이에 누가 무엇을 받고 어디에 보관하는지 알고 싶어.LearningFlow로 전달 값과 각 주체의 상태를 함께 보여줘.낯선 값의 뜻, 생략한 조건, 독자가 확인할 질문을 본문에 넣고 검증해줘.예를 들어 앱 A 로그인 뒤 앱 B에 들어갈 때를 설명하려면 “Keycloak 세션과 앱별 세션이 언제 생기고 무엇이 재사용되는지 구분해줘”라고 덧붙인다. 이 SSO 사례는 요청 예시이며 아직 구현된 흐름은 아니다. AI가 공식 근거와 해당 페이지의 설명을 대조해 단계를 설계해야 한다.
결과가 헷갈리면 상태를 짚어 말한다
섹션 제목: “결과가 헷갈리면 상태를 짚어 말한다”“두 번째 단계를 바로 고르면 브라우저가 무엇을 갖고 있는지 모르겠다”는 피드백은 모든 주체의 상태를 그 시점 기준으로 적게 하는 데 도움이 된다. “토큰 수신과 검증이 같은 단계처럼 보인다”면 두 사건을 나눠 달라고 한다.
AI는 기존 화면과 주제별 데이터를 재사용해 구현한다. 데이터 필드·파일 위치·검증 방법의 정본은 LearningFlow 작성 규칙에 있다. 구현 코드를 읽지 않아도 전달 값과 상태를 보고 설명이 맞는지 검토할 수 있다.