[연재] 지분·지배구조 (3) 관계도를 HTML 한 장에 — 라이브러리까지 넣어 오프라인으로
12MB짜리 웹페이지를 만들었습니다
보통 웹페이지 하나가 몇 MB인지 아세요. 무거운 뉴스 사이트가 3~5MB쯤 합니다. 그런데 제가 만든 지분 관계도는 파일 하나가 12MB예요.
느려서 그런 게 아닙니다. 일부러 그렇게 만들었어요. 회사 1,879개와 지분 화살표 2,697개, 그리고 그 그림을 그리는 라이브러리까지 전부 파일 하나 안에 넣었습니다.
인터넷을 끊고 열어도 그대로 뜹니다. 서버도 필요 없고, 파일 하나만 있으면 됩니다.
오늘은 왜 이런 이상한 선택을 했는지, 그리고 그렇게 하려니 무엇을 손봐야 했는지에 대한 이야기입니다.
왜 파일 하나였나
처음부터 이럴 생각은 아니었어요. 처음엔 그래프 라이브러리를 인터넷에서 불러오게 해뒀습니다. 남들이 다 쓰는 방식이고, 한 줄이면 되니까요.
그런데 이 화면이 어떤 상황에서 열릴지를 생각해보니 마음이 바뀌었습니다. 회사에서 열면 외부 주소가 막혀 있을 수 있고, 이동 중에 열면 신호가 약할 수 있고, 광고 차단 프로그램이 엉뚱한 걸 같이 막기도 합니다. 그중 하나만 걸려도 어떻게 되냐면, 회사 목록과 표는 멀쩡한데 가운데 그래프만 안 그려집니다. 화면이 반쪽이 되는데, 보는 사람은 그게 고장인지 원래 그런 건지도 모르고요.
그래서 밖에서 뭘 가져오는 걸 아예 없애기로 했습니다.
방법은 허무할 만큼 단순합니다. 라이브러리 파일을 프로젝트 안에 복사해두고, HTML을 만들 때 그 내용을 통째로 읽어서 자리표시자에 끼워 넣어요. 673KB짜리 자바스크립트가 HTML 안으로 들어갑니다.
빌드하면 12MB짜리 파일 하나가 나오고, 더블클릭하면 열립니다. 인터넷이 없어도, 웹서버가 없어도요.
이게 주는 이점이 생각보다 큽니다.
- 깨질 구석이 없습니다. 외부에서 가져오는 게 없으니 그쪽이 죽어도 상관없어요.
- 어디서든 열립니다. 파일 하나를 메신저로 보내도 상대가 그대로 봅니다.
- 광고 차단기나 회사 방화벽에 안 걸립니다. 외부 요청 자체가 없으니까요.
- 인증키가 필요 없습니다. 지난 편에서 말한 대로 수집과 빌드를 갈라놨거든요. 빌드는 키 없이 돕니다.
대신 12MB를 감수해야 합니다. 요즘 인터넷에서 12MB는 몇 초예요. 저는 그 몇 초를 주고 위의 네 가지를 샀다고 생각합니다.
한 가지 더 있습니다. 빌드가 몇 번을 돌려도 같은 결과를 냅니다. 같은 데이터로 만들면 어제 만든 파일과 오늘 만든 파일이 같아요. 밖에서 뭘 받아오면 그날그날 결과가 달라질 수 있는데, 그러면 화면이 이상할 때 내 코드 문제인지 저쪽 문제인지를 가릴 수가 없습니다. 이건 나중에 이 도구를 오래 손보면서 제일 고마웠던 성질입니다.
그래도 하나는 밖에 남겨뒀습니다
솔직히 예외가 있어요. 화면 아래 광고와 오른쪽 위 '신고·제안' 버튼은 사이트에 올릴 때 따로 끼워 넣습니다. 광고는 외부에서 불러오고요. 그게 안 떠도 지분 관계도는 멀쩡히 돕니다. 파일을 그대로 받아서 열면 아예 안 붙고요. 본체는 자기완결, 곁다리는 외부. 이 선을 지키려고 애썼습니다.
화살표 2,697개를 어떻게 안 겹치게 하나
파일 문제를 풀고 나니 진짜 문제가 남았습니다. 그림이 안 읽힙니다.
회사 66개짜리 삼성만 해도 화살표가 157개예요. 힘으로 밀어내는 자동 배치에 그냥 맡기면 실뭉치가 됩니다. 어느 선이 어디서 어디로 가는지 아무도 못 봐요.
두 가지를 했습니다.
하나는 업종끼리 모으는 것입니다. 전자·IT, 금융, 건설·중공업 같은 업종별로 자리를 미리 나눠주고, 그 안에서만 자동 배치를 돌립니다. 총수 일가는 위쪽에 고정하고요. 그러면 위에서 아래로 흐르는 모양이 대충 잡힙니다.
다른 하나는 선택했을 때만 보여주는 것입니다.
삼성전자를 눌렀을 때예요. 삼성전자에 연결된 화살표만 밝아지고 퍼센트가 뜹니다. 나머지는 흐려져요. 평소에는 퍼센트를 아예 안 그립니다. 2,697개 화살표에 전부 숫자를 붙이면 그냥 검은 화면이 되거든요.
색도 한 가지 규칙으로 통일했습니다. 전자·IT는 파랑, 금융은 초록, 물산·상사는 분홍. 이 색이 그래프 상자에도, 왼쪽 목록에도, 소유 사슬 표의 곱셈 숫자에도 똑같이 쓰입니다. 표에서 초록색 8.58%을 보면 "아, 금융 계열사를 거쳤구나"가 바로 읽히게요. 화면마다 색이 따로 놀면 사람은 색을 아예 안 봅니다.
이걸 만들면서 성가신 버그가 하나 있었습니다. 선택을 풀어도 퍼센트 글씨가 화면에 남아 있었어요. 라이브러리가 라벨을 기억하고 있어서 빈 문자열로 바꿔도 안 지워지더라고요. 결국 화살표 객체를 지웠다가 새로 만들어 끼우는 쪽으로 갔습니다. 정공법은 아니지만 확실히 지워집니다.
그룹 여러 개를 겹쳐 볼 때 생긴 일
지난 편에서 KCC가 삼성물산 지분 10%를 갖고 있다는 이야기를 했죠. 이런 건 두 그룹을 같이 놓고 봐야 의미가 있습니다. 그래서 여러 그룹을 겹쳐 보는 기능을 넣었어요.
처음 버전은 실패했습니다. 두 그룹의 회사를 한 판에 다 쏟아붓고 자동 배치를 돌렸더니, 각 그룹의 모양이 찌그러졌어요. 단독으로 보면 예쁘게 나오던 삼성이, LG와 같이 놓으면 옆으로 눌린 이상한 덩어리가 됐습니다.
해결은 순서를 바꾸는 것이었습니다. 각 그룹을 화면 밖에서 따로 배치해 좌표를 확정한 다음, 그 모양 그대로 화면의 한 칸에 옮겨 놓습니다. 두 개면 좌우, 서너 개면 사분면, 다섯이나 여섯이면 여섯 칸으로 나눠요.
삼성·SK·현대자동차·LG 네 개를 같이 띄운 화면입니다. 각 그룹이 단독으로 볼 때와 같은 모양을 유지하고 있어요. 칸 사이에는 옅은 점선을 넣어 경계를 표시했고요.
겹쳐보기는 최대 6개까지만 됩니다. 그 이상 고르면 안내 문구가 뜨고 안 늘어나요. 열 개를 겹치면 글씨가 안 보이는데, 안 보이는 화면을 만들 수 있게 해두면 사람은 반드시 그걸 만들거든요. 저부터요.
112개 목록을 어떻게 고르게 하나
그룹이 112개가 되니 고르는 것 자체가 일이 됐습니다. 가나다순으로 쭉 늘어놓으면 삼성을 찾는 데도 스크롤을 해야 해요.
지금은 위쪽에 재계 순위 상위 10개를 고정으로 놓고, 그 아래를 이름순으로 깔았습니다. 검색창에서는 대소문자를 안 가리고요. 'sk'라고 쳐도 SK가 나와야 하는데, 이런 건 만들 땐 늘 잊었다가 나중에 직접 쓰면서 걸립니다.
이름을 누르면 그 그룹으로 넘어가고, 옆의 네모를 누르면 겹쳐보기에 추가됩니다. 같은 목록에서 두 가지 동작을 시키는 건데, 처음엔 사람들이 헷갈릴까 걱정했어요. 그런데 나눠 놓으면 목록이 두 개가 되고, 그게 더 헷갈립니다. 대신 목록 위에 "이름 클릭 = 그 그룹 보기 · 체크 = 겹쳐보기"라고 한 줄 적어뒀습니다.
그리고 주소창도 손을 봤어요. 그룹이나 회사를 고르면 주소 끝이 바뀝니다. 그 주소를 복사해서 보내면 상대는 그 회사가 선택된 상태로 화면을 엽니다. 지분 이야기는 결국 "이 회사 좀 봐"로 시작하는데, 그때마다 "들어가서 삼성 누르고 삼성물산 찾아"라고 설명할 수는 없으니까요.
폰에서는 다른 화면이 필요했습니다
만들 때는 큰 화면만 보고 만들었습니다. 좌측 목록, 가운데 관계도, 우측 표. 세 칸짜리 구조예요.
폰으로 열어보고 알았습니다. 세 칸이 옆으로 붙으니 한 칸이 손가락 두 개 너비가 됐어요.
그래서 폰에서는 세 칸을 탭 세 개로 바꿨습니다. 요약·관계도·목록. 그리고 목록에서 회사를 고르면 자동으로 요약 탭으로 넘어가게 했어요. 안 그러면 고르고 나서 화면이 그대로라 눌린 건지 아닌지를 모릅니다.
이런 건 코드를 아무리 읽어도 안 나옵니다. 폰으로 한 번 열어봐야 알아요.
큰 화면에도 손이 좀 갔습니다. 좌우 패널은 경계를 끌어서 폭을 바꿀 수 있고, 접었다 펼 수도 있어요. 그래프를 크게 보고 싶을 때가 있고 표를 길게 보고 싶을 때가 있는데, 어느 쪽이 맞는지는 보는 사람마다 달라서 그냥 정하지 않기로 했습니다.
관계도에 넣지 않은 것들
무엇을 그릴지만큼 무엇을 안 그릴지도 정해야 했습니다.
재단과 외부 기관은 그래프에서 뺐습니다. 국민연금은 거의 모든 상장사의 대주주라, 그리면 화면 한가운데 큰 점 하나가 생기고 거기서 선이 수십 개 뻗어나갑니다. 그룹 내부 구조가 그 선에 다 묻혀요. 그래서 표에는 남기고 그림에서만 뺐습니다.
선이 하나도 없는 회사도 뺐습니다. 공시가 없어 아무 데도 안 이어지는 회사가 있는데, 이걸 그리면 화면 구석에 외톨이 상자가 둥둥 떠다닙니다. 왼쪽 목록에는 그대로 남겨뒀어요. 없는 회사인 척하면 안 되니까요.
둘 다 "데이터에 있는 걸 화면에서 뺀다"는 결정이라 좀 망설였습니다. 결국 기준은 하나였어요. 빼도 사실이 안 바뀌면 뺀다. 목록과 표에 그대로 남아 있으니, 그림에서 빠졌다고 없어진 건 아니거든요.
표만으로는 부족했습니다
숫자가 다 맞아도 사람이 못 읽으면 소용이 없더라고요. 화면을 처음 열면 회사 이름과 퍼센트만 잔뜩 나오는데, 이 그룹이 어떤 구조인지는 여전히 모르겠는 겁니다.
그래서 두 가지를 더 붙였습니다.
하나는 회사별 7개년 실적 차트입니다. 매출과 이익을 왼쪽 축, 이익률을 오른쪽 축에 놓은 선그래프예요. 삼성전자의 2023년 실적이 푹 꺼졌다가 회복하는 게 보이시죠. 이것도 SVG로 직접 그렸습니다. 차트 라이브러리를 하나 더 넣으면 파일이 더 커지니까요.
다른 하나는 그룹 개요 글입니다. 이 그룹이 어떤 축으로 굴러가는지를 문장으로 적어둔 거예요. 112개 그룹 전부에 붙어 있습니다.
여기서 중요한 결정을 하나 했습니다. 이 글을 화면이 열릴 때 만드는 게 아니라, 미리 만들어서 파일 안에 넣어뒀다는 겁니다. 화면을 열 때마다 어딘가에 물어보는 구조였으면, 인터넷도 필요하고 인증키도 필요하고 요금도 나갔을 거예요. 그러면 앞에서 공들여 만든 '파일 하나로 오프라인' 원칙이 통째로 깨집니다.
글은 만들 때 한 번만 쓰고, 결과를 데이터에 넣고, 그 다음부터 화면은 그냥 읽기만 합니다.
글을 넣으면 화면이 깨질 수 있습니다
글을 데이터에 넣기로 하니 새 걱정이 생겼습니다. 그 글에 <script> 같은 게 섞여 들어가면 화면이 깨지거나, 더 나쁜 일이 생길 수 있어요.
그래서 순서를 정했습니다. 먼저 모든 특수문자를 무해한 글자로 바꾸고, 그다음에 제가 허용한 세 가지 표시만 다시 살립니다. ## 헤더, - 불릿, 강조. 이 셋뿐이에요.
이렇게 하면 글에 어떤 것이 섞여 들어와도 그냥 글자로 보입니다. 순서가 반대였으면 위험했을 거예요. 나중에 이 데이터를 누가 어디서 만들어 넣을지 모르니까, 받는 쪽에서 막는 게 맞다고 봤습니다.
사람이 붙잡은 지점
이번 편은 대부분 화면 이야기라, 사람이 개입한 자리가 앞선 편들과 좀 다릅니다. 계산은 맞고 틀림이 있는데, 화면은 읽히느냐 안 읽히느냐뿐이거든요. 그건 열어보는 것 말고 확인할 방법이 없습니다.
실제로 이번 편에 나온 것들이 전부 "열어보고 이상해서" 고친 것들이에요.
- 그래프만 안 그려진 화면을 보고 → 라이브러리를 파일 안에 넣었고
- 실뭉치가 된 화살표를 보고 → 선택했을 때만 밝히기로 했고
- 찌그러진 겹쳐보기를 보고 → 배치 순서를 바꿨고
- 폰에서 손가락 두 개 너비를 보고 → 탭으로 바꿨습니다
AI에게 "그래프를 그려줘"라고 하면 그려줍니다. 그런데 읽히는지는 안 봐줍니다. 코드는 아무 오류 없이 잘 돌고 있거든요. 이 간극이 제가 이 연재에서 계속 말하는 자리인 것 같습니다.
다음 편
오늘은 잘된 이야기를 주로 했습니다. 다음 편은 반대예요.
112개 그룹을 넣었는데, 그중 화살표가 한 개도 없는 그룹이 열 개입니다. 네이버도, 쿠팡도, 대방건설도 화면이 텅 비어 있어요. 데이터를 못 구한 게 아니라 구할 수가 없는 것들입니다. 왜 그런지, 그리고 그걸 화면에서 어떻게 처리했는지를 적겠습니다.
지분 구조는 victor-house.com/equity에서 보실 수 있습니다. 학습·참고용이고, 투자 판단의 근거로 쓰라고 만든 것은 아닙니다.
#지분구조 #지배구조 #재벌 #대기업집단 #DART #전자공시 #데이터시각화 #관계도 #네트워크그래프 #싱글파일 #오프라인 #정적사이트 #HTML #자바스크립트 #SVG차트 #반응형 #모바일최적화 #프론트엔드 #웹개발 #AI활용 #AI자동화 #클로드 #바이브코딩 #비개발자개발 #개인프로젝트 #사이드프로젝트 #도구만들기 #휴먼인더루프 #삼성그룹 #빅터하우스