Show GN: 8주간 작은 브라우저를 만들어봤어요.
(github.com/beginner-jhj)안녕하세요! 컴퓨터 공학과 입학을 앞둔 고3 학생입니다.
8주간 C++, QT를 통해서 작은 브라우저 엔진을 기초부터 만들어 봤습니다.
C++는 이번에 처음 접해본 터라 수많은 시행착오가 있었지만, 렌더링 파이프라인의 핵심을 직접 코드로 옮겨보며 많은 것을 배웠습니다.
전체 렌더링 파이프라인을 5단계로 나누어 구현했습니다:
-
HTML 문자열을 분석하여 DOM 트리 생성 (에러 교정 포함)
-
CSS 규칙 파싱 및 Cascade를 통한 Computed Style 계산
-
block/Inline 모델 기반의 박스 위치 및 크기 계산
-
이미지 캐싱 및 로딩 후 레이아웃 재계산(Reflow) 처리
-
Qt Graphics View Framework를 사용한 최종 Painting
처음 배우는 C++로 작성한 코드라 부족한 점이 많을 수 있습니다.
코드 구조나 개선 방향에 대해 피드백을 주신다면 감사히 배우겠습니다!
더 자세한 내용은 https://github.com/beginner-jhj/mini_browser/blob/main/README.ko.md 에서 확인하실 수 있습니다.
우선 응원드립니다.
웹 브라우저를 만들 생각을 하다니..
이제 좋은 경험을 하셨으니..
크로니미움 코드를 다운 받으셔서..
빌드를 해 보고
분석을 해보는 경험을 하셔도 좋을 듯해요.
창조는 모방의 어머니 이거든요.
재미있는 작업을 하셨네요. 클로드 사용 없이 직접 했으면 더 많이 배울수 있지 않았을까 싶지만 AI 활용이 대세이니 이것도 좋은 경험인것 같습니다.
아이디어를 하나 드리자면, 이 경험을 바탕으로 og tag parser를 하나 만들어보면 어떨까 합니다.
og tag는 웹페이지에 설정된 대표 썸네일 이미지 등의 간단 정보인데, 이걸 가져오는건 DOM parser를 사용하면 간단한 작업이지만 DOM parser가 무겁다는 이슈가 있습니다.
그래서 다른 DOM parser를 사용하지 않고, 전체 DOM을 다 parsing 하지 않고, 단순히 특정 tag 정보만 가져오는 작고 효율적인 parser를 구현하면 유용한 라이브러리가 될수 있을겁니다.
특히 모바일 앱에서 이런 라이브러리가 아쉽더라구요. javascript/koltlin/swift 언어를 이용해 모바일 용으로 만든다면 인기있는 오픈소스 라이브러리가 될수 있을겁니다.
수능 끝나고 대학 입학 때까지 펑펑 논 기억 밖에 없는데... README 읽어보니 핵심적인 내용 잘 이해하신 거 같습니다. 저도 이 책 읽고, swift 로 구현해봤었네요. ㅎㅎ
README 에 그런 내용은 없군요. 내용이 책과 비슷해서 제가 착각... 죄송;;;
'밑바닥부터 시작하는 웹 브라우저' 라는 책입니다. 책의 예제는 python 으로 구현되어 있습니다.
재밌게 잘 읽었어요!
만드려고 노력하고 시도한 것부터 일류라고 생각합니다. README가 마치 하나의 리포트 같아서 더 재밌었어요.
다음에는 무엇인지 기대해봅니다 ㅎㅎ