퀘스트

빈 장면에 상자와 카메라를 놓고 좌표 하나씩 바꿔 본다.

마무리할 때 남길 것

작은 예제와 함께 물체 회전·카메라 이동의 차이를 내 말로 설명하기.

모양·표면·셰이더에 전달하는 값의 역할을 구분한다.

마무리할 때 남길 것

정답을 가리고 구체의 모양과 대기의 색이 각각 어디서 정해지는지 재설명하기.

device·pipeline·command의 관계를 작은 장면에서 살핀다.

마무리할 때 남길 것

WebGL 예제와 설정·명령 제출의 차이를 정리하고 미지원 화면도 준비하기.

학습 때 선택한 vgpu 버전과 API를 확인하고 앞의 예제와 비교한다.

마무리할 때 남길 것

직접 작성한 코드와 라이브러리에 맡긴 부분을 나눠 기록하기.

기초 예제에서 배운 내용을 기존 스타차트의 행성 하나에 연결한다.

마무리할 때 남길 것

모양·표면·카메라·대기를 분리해서 설명하고 바꾼 값과 화면을 함께 남기기.

공개 필터 사례를 보고 작은 목록 화면에서 적용해 본다.

마무리할 때 남길 것

필터 선택 → 새로고침 → 뒤로 가기 후에도 조건이 맞는지 확인하기.

검색 결과가 바뀔 때 포인터와 키보드 선택이 어떻게 달라지는지 재현한다.

마무리할 때 남길 것

방향키·Enter·Escape와 결과 갱신을 직접 시험하고 선택 기준을 적기.

목록 하나의 로딩·성공·빈 결과·오류 상태를 나란히 설계한다.

마무리할 때 남길 것

각 상태에서 사용자가 다음에 할 행동과 키보드 포커스를 확인하기.

패널 전환 하나를 만들고 중간 취소와 동작 줄이기를 비교한다.

마무리할 때 남길 것

전환 전후 포커스와 동작 줄이기 설정에서의 화면을 기록하기.

읽는 글과 클릭하는 3D 예제가 각각 어디에서 실행되는지 구분한다.

마무리할 때 남길 것

작은 페이지에서 use client가 필요한 부분과 브라우저 전용 코드를 표시하기.

목록·상세 화면에서 데이터를 가져오는 시점과 캐시를 관찰한다.

마무리할 때 남길 것

설치한 Next.js 버전을 적고 새로고침·화면 이동·갱신 결과를 비교하기.

로딩·성공·오류를 구분 가능한 타입으로 표현한다.

마무리할 때 남길 것

불가능한 상태 조합을 줄이고 분기 누락을 타입 검사로 찾기.

개인 프로젝트용 작은 응답에서 누락·잘못된 값을 처리한다.

마무리할 때 남길 것

정상·누락·실패 입력 세 가지와 화면에 전달할 데이터 형태 기록하기.

브라우저 기록을 계정에 저장할 때 데이터 소유권과 충돌을 정한다.

마무리할 때 남길 것

로그인 전후 흐름과 저장 실패·재시도·다른 기기 충돌 예시 남기기.

작은 3D 예제를 같은 기기·화면 크기·장면 조건으로 반복 측정한다.

마무리할 때 남길 것

조건·반복 횟수·측정값을 남기고 측정하지 않은 성능은 주장하지 않기.

검색 → 선택 → 돌아오기 중 깨지기 쉬운 동작 하나를 자동으로 확인한다.

마무리할 때 남길 것

실제로 실패하는 경우를 재현한 뒤 수정 전후 테스트 결과 남기기.

다음 학습에서 헷갈린 개념 하나를 한국어와 영어로 적는다.

마무리할 때 남길 것

첫 문장·피드백·내가 다시 쓴 문장을 함께 남기기.

buffer 생성과 좌표 전달의 차이를 설명했다. 배열만 변경하면 GPU 값은 그대로라고 예측하고, 실제 값이 재전달 후 바뀌는 것을 확인했다.

확인한 결과

buffer 생성과 좌표 전달의 차이를 설명했다. 배열만 변경하면 GPU 값은 그대로라고 예측하고, 실제 값이 재전달 후 바뀌는 것을 확인했다.

첫 시도 후 after changing과 transfer the data again, 관사를 반영해 참고 문장을 보며 다시 썼다. JavaScript의 철자 오타를 정정했다.

확인한 결과

첫 시도 후 after changing과 transfer the data again, 관사를 반영해 참고 문장을 보며 다시 썼다. JavaScript의 철자 오타를 정정했다.

준비만으로 삼각형이 나타나지 않는 이유와 device의 저장 공간 생성 역할을 설명했다. 직접 실행한 화면에서 device 확보 성공을 확인했다.

확인한 결과

준비만으로 삼각형이 나타나지 않는 이유와 device의 저장 공간 생성 역할을 설명했다. 직접 실행한 화면에서 device 확보 성공을 확인했다.

첫 시도 후 To create와 we need to prepare a device를 반영해 참고 문장을 보며 다시 썼다. storage의 철자 오타를 정정했다.

확인한 결과

첫 시도 후 To create와 we need to prepare a device를 반영해 참고 문장을 보며 다시 썼다. storage의 철자 오타를 정정했다.

색 선택만으로 화면이 바뀌지 않고 전달 후 다시 그려야 한다고 관찰하고 설명했다. uniform 색을 그대로 출력하는 shader에서 삼각형 전체가 같은 색이 되는 이유를 설명했다.

확인한 결과

색 선택만으로 화면이 바뀌지 않고 전달 후 다시 그려야 한다고 관찰하고 설명했다. uniform 색을 그대로 출력하는 shader에서 삼각형 전체가 같은 색이 되는 이유를 설명했다.

첫 시도 후 After changing과 pass it to the shader, redraw the triangle을 반영해 참고 문장을 보며 다시 썼다.

확인한 결과

첫 시도 후 After changing과 pass it to the shader, redraw the triangle을 반영해 참고 문장을 보며 다시 썼다.

실제 WebGL 삼각형에서 꼭짓점 하나를 움직이고 좌표와 윤곽의 관계를 설명했다. vertex shader부터 fragment shader까지의 순서를 교정 뒤 재설명했다.

확인한 결과

실제 WebGL 삼각형에서 꼭짓점 하나를 움직이고 좌표와 윤곽의 관계를 설명했다. vertex shader부터 fragment shader까지의 순서를 교정 뒤 재설명했다.

예문 없는 첫 시도 후 단수 동사와 each vertex·each fragment를 교정하고 참고 문장을 보며 다시 썼다.

확인한 결과

예문 없는 첫 시도 후 단수 동사와 each vertex·each fragment를 교정하고 참고 문장을 보며 다시 썼다.

Texture만 껐다 켜며 표면의 외형 변화를 관찰했다. Texture가 Material을 대체하지 않고 Material이 표면 계산에 사용하는 데이터라고 재설명했다.

확인한 결과

Texture만 껐다 켜며 표면의 외형 변화를 관찰했다. Texture가 Material을 대체하지 않고 Material이 표면 계산에 사용하는 데이터라고 재설명했다.

예문 없는 첫 시도 후 관사와 문장 구조를 교정하고 surface's appearance의 뜻을 확인한 뒤 참고 문장을 보며 다시 썼다.

확인한 결과

예문 없는 첫 시도 후 관사와 문장 구조를 교정하고 surface's appearance의 뜻을 확인한 뒤 참고 문장을 보며 다시 썼다.

설정을 하나씩 바꾸어 모양·표면·조명 조건을 구분했다. Roughness가 반사광의 집중과 분산을 바꾼다는 점을 실제 조작 뒤 재설명했다.

확인한 결과

설정을 하나씩 바꾸어 모양·표면·조명 조건을 구분했다. Roughness가 반사광의 집중과 분산을 바꾼다는 점을 실제 조작 뒤 재설명했다.

예문 없는 첫 시도 후 as ... increases와 비교급을 교정하고 참고 문장을 보며 완성 문장을 다시 썼다.

확인한 결과

예문 없는 첫 시도 후 as ... increases와 비교급을 교정하고 참고 문장을 보며 완성 문장을 다시 썼다.

그리드를 기준으로 물체 회전과 카메라 이동을 구분해 재설명했다. lookAt이 위치가 아니라 방향을 계산하며 매 프레임 호출해야 한다는 점을 확인했다.

확인한 결과

그리드를 기준으로 물체 회전과 카메라 이동을 구분해 재설명했다. lookAt이 위치가 아니라 방향을 계산하며 매 프레임 호출해야 한다는 점을 확인했다.

dt가 직전 프레임과의 차이임을 교정 뒤 다시 설명했다. 프레임 속도와 dt가 반비례해 곱이 상쇄되므로 1초간 이동 거리가 같아진다는 점을 설명했다.

확인한 결과

dt가 직전 프레임과의 차이임을 교정 뒤 다시 설명했다. 프레임 속도와 dt가 반비례해 곱이 상쇄되므로 1초간 이동 거리가 같아진다는 점을 설명했다.

예문 없는 첫 시도 후 관사와 so that 절, even when ~ changes, frame rate를 반영해 참고 문장을 보며 다시 썼다.

확인한 결과

예문 없는 첫 시도 후 관사와 so that 절, even when ~ changes, frame rate를 반영해 참고 문장을 보며 다시 썼다.

같은 좌표로 그리면 움직이지 않는 이유를 설명했다. 다음 예약이 없으면 첫 그림이 남는다는 결과와 이유를 교정 뒤 재설명했다.

확인한 결과

같은 좌표로 그리면 움직이지 않는 이유를 설명했다. 다음 예약이 없으면 첫 그림이 남는다는 결과와 이유를 교정 뒤 재설명했다.

예문 없는 첫 시도 후 need to request와 keep the animation running을 반영해 참고 문장을 보며 다시 썼다.

확인한 결과

예문 없는 첫 시도 후 need to request와 keep the animation running을 반영해 참고 문장을 보며 다시 썼다.

x 변경을 관찰하고 y 변경을 예측했다. 지우고 새 좌표에 다시 그리는 반복으로 움직임을 표현한다고 설명했다.

확인한 결과

x 변경을 관찰하고 y 변경을 예측했다. 지우고 새 좌표에 다시 그리는 반복으로 움직임을 표현한다고 설명했다.

첫 시도 뒤 an object, clearing, redrawing과 by + -ing를 반영해 참고 문장을 보며 완성 문장을 다시 썼다.

확인한 결과

첫 시도 뒤 an object, clearing, redrawing과 by + -ing를 반영해 참고 문장을 보며 완성 문장을 다시 썼다.

상자 회전과 카메라 이동을 구분하고, Three.js와 브라우저 API의 관계를 설명했다.

확인한 결과

상자 회전과 카메라 이동을 구분하고, Three.js와 브라우저 API의 관계를 설명했다.

supports와 by making을 반영해 완성 문장을 다시 썼다.

확인한 결과

supports와 by making을 반영해 완성 문장을 다시 썼다.

기본 흐름에 대한 회고와 WebGL·WebGPU의 배경에 대한 질문을 남겼다.

확인한 결과

기본 흐름에 대한 회고와 WebGL·WebGPU의 배경에 대한 질문을 남겼다.

키보드 선택과 포인터 좌표의 차이를 비교 예제로 확인했다.

확인한 결과

키보드 선택과 포인터 좌표의 차이를 비교 예제로 확인했다.

피드백을 반영한 영어 완성 문장을 다시 작성했다.

확인한 결과

피드백을 반영한 영어 완성 문장을 다시 작성했다.

잘못된 클릭 방지와 최신 결과 표시 지연의 관계를 정리했다.

확인한 결과

잘못된 클릭 방지와 최신 결과 표시 지연의 관계를 정리했다.

학습용 비교 화면으로 구성 요소의 역할과 변화 예측을 살폈다.

확인한 결과

학습용 비교 화면으로 구성 요소의 역할과 변화 예측을 살폈다.

단수 주어에 맞는 동사를 고쳐 쓰고 판단의 이유를 표현했다.

확인한 결과

단수 주어에 맞는 동사를 고쳐 쓰고 판단의 이유를 표현했다.

비교 화면이 이해에 도움이 됐다는 학습 피드백을 남겼다.

확인한 결과

비교 화면이 이해에 도움이 됐다는 학습 피드백을 남겼다.