문서·제품·작업 화면의 설계 판단 - 개인사이트 비교 기록
DanzzaN이 개인사이트와 향후 업무용·발표용·공개용 사이트를 위해 요청한 비교를 바탕으로, 문서 읽기·제품 설명·반복 작업 화면에서 다시 쓸 판단을 정리했다. 원자료의 작성자는 프로젝트 관찰과 요청을 기록한 DanzzaN·Codex이며, 아래 외부 사이트와 설계 지침은 각각 해당 운영자·저자의 원천이다. 특정 기업의 선호나 모든 구성을 개인사이트에 채택한 기록이 아니다.
공통 읽기 화면과 글별 전개
기술 블로그 조사에서는 NAVER D2·토스·카카오·우아한형제들·AWS의 글 20편을 살폈다. 글꼴·본문 폭·제목 계층의 공통 화면과, 기술 선택·문제 해결·운영 경험·역할 변화를 설명하는 전개는 따로 비교할 수 있었다. 토스의 App Router 도입 판단 글은 선택 결과와 질문을 따라 설명하고, Technical Writer의 제품 오너 경험은 역할과 제품 경험을 따라 설명한다. 같은 사이트라는 이유만으로 하나의 전개 방식이나 사용자의 기본 문체를 도출하지 않는다.
2026-09-10의 CSS 관찰에서는 글자 크기가 같은 표본도 행간·본문 폭이 달랐다. 읽기 조건을 판단할 때 크기만 떼어 비교하지 않고 같은 실제 한글·영문·코드 문단으로 크기·굵기·행간·줄 길이를 함께 살핀다는 판단으로 이어졌다. 이는 독서 속도·피로도 실험이나 최적 수치를 입증한 결과는 아니다.
좁은 화면에서는 페이지 전체의 가로 넘침과 내부 표·코드·그림의 읽기 가능성이 달랐다. D2 표본은 페이지 폭이 맞아도 넓은 표의 오른쪽이 잘렸고, 다른 표본에서는 내용별 스크롤이나 축소된 그림 안의 글자를 따로 살펴야 했다. 긴 제목·식별자·표·그림이 실제 내용으로 들어오는지 확인한 뒤 해당 조건을 고르는 근거다. 구체적인 글·작성진·CSS 값·390px 관찰 조건과 실제 기기 미검증 범위는 기술 블로그 원천에 보존한다.
링크도 출처·시리즈·관련 주제·날짜상 이웃처럼 서로 다른 맥락을 갖지만, 모두 별도 관계 필드로 입력해야 하는 것은 아니다. 사용자는 후속 D-007에서 파일명이나 본문으로 관계를 이해할 수 있으면 충분하다고 정정했다. 제목·본문과 명시적 링크를 우선하는 이 프로젝트의 채택 이유는 개인사이트 설계와 운영의 의사결정 - Codex 대화에서 읽는다.
소개에서 실제 작업으로 이어지는 설명
2026-09-15의 기업 20개사 비교는 홈·대표 제품 40페이지와 선택한 좁은 화면·조작을 대상으로 했다. 사용자는 이미지·영상을 개인사이트에 가져오기 위해서가 아니라 이후 업무·프로젝트 발표·공개용 사이트에서 구성할 가능성을 위해 분석하도록 범위를 정했다. 외관으로 제작 방식이나 기업 성과를 입증한 조사는 아니다.
소개 화면의 현장 사진, 제품의 결과 화면, 처리 흐름, 시간에 따른 변화는 각각 다른 질문에 답한다. 어떤 자료를 가져올지는 현재 설명에서 무엇을 알게 해야 하는지에 따라 고른다. 넓은 여백·큰 제목·모션이 한 소개 화면에 어울린다는 관찰을 반복 입력이나 문서 읽기 화면의 명세로 옮기지 않는다. 기업 비교 종합과 확인 범위가 기업별 URL·관찰 시점·미확인 항목을 소유한다.
후속 OpenAI Platform 관찰은 로그인된 홈·실험·모델 문서에서 상태 확인과 다음 작업, 설명·실험·코드 사이의 연결을 살폈다. GitHub는 사용자가 직군 사람들이 일상적으로 보는 화면을 추가로 요청해 공개 저장소·문서·이슈·PR·변경 파일·릴리스·소개를 비교했다. 소개에서 작업으로 이동하면서 같은 대상과 사례를 이어 주는지, 목록·본문·변경 검토가 서로 다른 밀도를 요구하는지, 승인·시험·실제 결과의 근거를 어디에서 확인하는지를 질문할 수 있다. Primer 탐색 원칙의 위치·문맥·복귀 안내와도 연결된다. 이는 사용자의 GitHub 스타일 전체 채택이나 특정 모델 권장이 아니다.
OpenAI Platform 원천의 로그인 화면 관찰은 당시 허용된 작업에서 얻은 기록이다. 이번 증류에서는 그 기록을 대조했으며 로그인 화면을 새로 열거나 계정 동작을 재실행하지 않았다. 계정별 식별 정보·사용량·금액을 보존하지 않는다. GitHub 원천의 여덟 화면과 여섯 화면의 390px 확인도 당시 범위이며 GitHub 전체 제품에 대한 검증으로 확대하지 않는다.
역할별 색과 실제 도착지
2026-09-16~17 팔레트 보강은 배경·그 위의 글자·경계·행동·선택·상태를 역할별로 기록했다. 홈과 제품의 색 사용은 다를 수 있으며, 선언된 테마 값과 실제로 보이는 요소의 값도 구분했다. Primer 색상 원칙처럼 기본 값·의미 역할·컴포넌트 역할을 나눠 읽는다. 같은 초록도 주요 행동, 추가된 코드, 성공 상태에 쓰일 수 있으므로 색 이름 하나만으로 의미를 판정하지 않고 문구·기호·위치를 함께 본다.
읽기 대비는 실제 전경과 배경의 조합으로 확인한다. 반투명 면이나 하위 요소·의사요소가 끼어 있으면 그 조합을 확인해야 한다. 관찰한 일부 단색 쌍의 대비 계산으로 페이지 전체의 접근성을 판정하지 않는다. 일반 텍스트와 큰 글자의 기준·예외는 WCAG의 대비 설명에서 읽는다. 정확한 색 값과 당시 계산 조건은 22개 대상의 역할별 팔레트와 Thaki Cloud 원천에 둔다. 이번에는 CSS를 다시 측정하지 않았다.
Thaki Cloud의 제품 탐색 표현과 실제 목적지도 대조했다. 2026-09-17 영문 홈의 AI Cloud·On-Prem AI Cloud 탐색 링크를 따라가면 문의 화면으로 이어졌다. 상세 설명과 상담 요청 중 무엇을 제공하는지 이름과 목적지를 함께 검토할 사례다. 문의 입력이나 제출은 하지 않았다.
제품 소개의 수치 역시 값만 옮기지 않고 단위·계산 종류·조건·원천을 함께 본다. Thaki Cloud의 HGX B200 8개 설명에 붙은 FP32 18 PFLOPS 표기와 NVIDIA HGX 공식 표의 FP32·TF32 항목이 같지 않음을 대조했다. 공식 표는 B200의 FP32를 600 TFLOPS, TF32 Tensor Core를 희소성 조건의 18 PFLOPS로 구분한다. 이것은 두 페이지의 표기 대조이며 실제 납품 장비의 성능 측정이나 표기 의도 판정은 아니다.
이번에 남긴 범위
2026-09-17에 프로젝트 Source와 Atomic, 후속 결정 및 기존 개인 UI Map·Atomic·Source를 대조했다. 새 외부 사실이나 판단을 사용하는 부분은 위 토스 두 글, Primer의 탐색·색상 문서, Thaki Cloud 홈·문의, NVIDIA HGX 표와 직접 대조했다. 타이포그래피·레이아웃·색·문구의 일반 판단은 기존 인터페이스 판단과 검토 기준 - Jakub Krehel이 연결한 해당 원문 부분도 다시 읽었다. 이전 관찰의 모든 사이트·화면을 새로 감사하거나 현재 CSS·로그인 제품 상태를 재측정한 작업은 아니다.
다시 쓸 주장과 조건은 기존 노트에 보강한다. 고정된 글자 크기·본문 폭·브랜드 색·개별 제품 메뉴를 새 전역 규칙으로 만들지 않는다. 개인사이트에서 실제 고른 글자 링크·읽던 자리 복귀·남색·파랑·라벤더의 이유는 위 의사결정 Source에 두고, 발췌의 내용 선정과 미정인 글 전개 선호는 계속 프로젝트의 후속 피드백 범위로 둔다. verified: true는 여기 인용한 원천과 요약의 충실도이며 보편적 효과·사용자 선호·기업 주장의 객관적 진실을 뜻하지 않는다.
여러 활동을 잇는 개인사이트와 탐색 비용 — 2026-09-26
DanzzaN이 Taewoo Park의 개인사이트 분석을 요청하고 후속 증류 계획의 실행을 승인했다. 관찰과 아래 해석은 Codex의 분석이며, 흑백·큰 제목·3D 그래프에 대한 사용자 선호나 개인사이트의 구현 채택은 없었다. 이 사례의 게시일은 확인하지 않았고, 대화·브라우저 관찰·원천 대조일은 2026-09-26이다. 외부 페이지의 작성 주체는 Taewoo Park 사이트이며, 관찰 기록의 참여자는 DanzzaN과 Codex다.
홈은 물리학·코드·문화를 공통 문장으로 소개하고 About에서 각 활동을 하나의 질문에 연결한다. Projects의 NodePrompt 설명은 문제·접근·결과·기술로 이어진다. 여러 활동을 연결하는 설명과 개별 작업을 읽는 경로를 함께 제공하는 사례로 해석했다. 사이트가 제시한 성과·연구·운영 주장의 진실이나 작업 결과물을 독립적으로 검증한 것은 아니다.
흑백, 큰 제목, 얇은 선, 작은 번호·도표 표기와 노드 도식은 여러 페이지에서 공통 인상을 만든다. 데스크톱 Projects의 큰 도입 문장은 첫 화면 대부분을 차지했고 실제 작업 목록에는 추가 스크롤이 필요했다. 홈의 그래프 구간에서는 휠 입력에 페이지 위치보다 층 표시가 변하는 동작을 관찰했다. 페이지 전환 중에는 검은 화면이 나타났다가 목적지에 도착했다. 표현의 목적과 탐색 비용을 함께 비교할 근거이며, 로딩 실패나 모든 환경의 스크롤 불능을 확인한 결과가 아니다.
Writing에서 첫 글을 누르면 목록 안에 한국어 본문이 펼쳐지고 주소는 /writing/5로 바뀌었다. 영어 제목만으로 본문 언어를 예상하기 어려울 수 있다. 개별 주소가 생긴 것은 확인했지만 직접 주소 접속·새로고침·뒤로가기의 펼침 상태 복원까지 확인한 것은 아니다. Contact는 협업 주제·응답 예상 시간과 연락 채널을 안내했고 Startup의 연락 링크도 전환 후 Contact에 도착했다.
같은 Contact가 메뉴에는 08, 본문에는 INDEX 07로 표시됐다. About에 2026년 7월 활동이 있는 반면 공통 하단은 LAST EDIT 2026.04로 표시됐다. 날짜의 정의나 실제 최종 수정일은 확인하지 않았다. 이는 여러 위치의 표시가 어떤 대상을 가리키는지 함께 살필 사례다. Trendchaser의 날짜별 발행 목록·검색 입력은 재방문할 이유를 제공하는 구성으로 해석했으며 실제 방문·재방문 증가나 검색 동작을 측정하지 않았다.
데스크톱 주요 메뉴와 글 펼치기, 390px 폭의 홈·메뉴·Contact를 직접 관찰했다. 실제 휴대폰·터치 그래프·성능·동작 감소·스크린리더 전수 검증은 하지 않았다. 상세 URL·관찰 조건·경로 정정은 프로젝트 원문이 소유한다. 저장 단계는 같은 대화의 관찰을 대조했으며 사이트를 새로 감사하지 않았다.
이 프로젝트는 관심 있는 사람이 원천 문서와 연결을 따라 읽는 목적을 유지한다. 소개 연출을 기본 화면 규칙으로 옮기지 않고, 사용자의 채택 전에는 분석을 구현 작업 큐로 바꾸지 않는다. 재사용할 질문은 소개에서 개별 작업으로 문맥이 이어지는지, 인터랙션이 읽기 조작과 충돌하는지, 목록의 펼침·주소·복귀가 각각 어떤 상태를 제공하는지다.
기술 글의 설명 자료를 잇는 후속 사례 — 2026-09-30
기술 글의 설명 구조와 시각 자료 - Kciter는 Kciter의 홈·글 목록·다섯 글에서 공통 읽기 화면과 개별 설명 구조를 비교한 후속 기록이다. 다른 표지의 종횡비·정렬 규칙, 표지와 본문 자료의 역할, 그림 앞뒤의 관찰 질문과 해석, 비교 데모의 조건을 추가했다. 구체적인 수치·실행 조건은 연결된 프로젝트 원문에 둔다.
이 사례는 기존 공통 화면·전개 분리와 목적별 매체 판단을 보강한다. 세부 근거가 여러 설명·기술 주장을 독립적으로 뒷받침하므로 별도 Source로 보존하고 여기서는 비교 경로만 연결한다. 사용자의 깔끔하다는 평가와 증류 요청은 해당 Source에 기록하며 구현 채택과 구분한다.