요청에서 응답까지, 웹 화면이 만들어지는 과정

화면 확인용 예시 글입니다. 아래 그림은 설명용이며 실제 서비스 구조가 아닙니다.

브라우저는 주소를 보내고, 앱은 글을 찾아 HTML을 만듭니다. 이미지가 있으면 별도의 파일 경로를 붙입니다.

저장소는 글의 제목과 본문만 보관하고, 화면 배치 정보는 템플릿이 맡습니다. 이 구분은 예시 설명입니다.

응답이 오면 브라우저는 글과 스타일, 필요한 이미지만 다시 그립니다. 새로고침 없이 바뀌는 화면은 이 글의 범위가 아닙니다.

작은 화면에서는 그림이 가로로 넘치지 않고 글 너비에 맞춰 줄어드는지 확인하면 됩니다.

요청에는 주소와 함께 어떤 글을 원하는지 들어 있습니다. 앱은 그 값으로 글을 찾고, 없으면 없는 화면을 줍니다.

HTML이 만들어진 뒤에도 스타일과 이미지는 따로 받아집니다. 그래서 글만 먼저 보이고 사진이 늦게 뜨는 경우가 있습니다.

이 그림의 상자는 역할을 나누어 보여 줄 뿐입니다. 실제 서버 대수나 속도를 나타내지 않습니다.

확인용으로 이 글을 열면, 그림이 본문 너비를 넘지 않는지와 캡션이 그림 아래에 붙는지 보면 됩니다.