> ## Content Index
> Fetch the complete content index at: https://blog.heimdex.co/llms.txt
> Use this file to discover other available public pages before exploring further.

# [heimdex people] '개발자 없이 해냈습니다' 디자이너의 클로드 코드 활용 회사 홈페이지 구축기｜Design
- URL: https://blog.heimdex.co/ko/claude-code-website-build/
- Published: 2026-08-20T04:14:04.000Z
- Updated: 2026-08-20T04:25:56.000Z
- Description: 프로덕트 디자이너가 클로드 코드로 리브랜딩 홈페이지를 2주 만에 직접 배포했습니다. 통했던 지시와 끝까지 안 통한 지시를 프롬프트 원문과 함께 정리했습니다.
- Author: Heimdex
- Tags: #ko, Insights

클로드 코드로 홈페이지를 구축하는 것이 한창 화제였어요. 코딩 몰라도 30분 만에 홈페이지 만들었다는 글이 계속 올라왔고, 마침 리브랜딩이 끝나서 새 브랜드로 홈페이지를 다시 만들어야 하는 상황이었습니다. 개발 리소스는 전부 제품에 붙어 있었고요. 그래서 프로덕트 디자이너 김준수님이 직접 해보기로 했습니다. 결과부터 말하면 배포까지 갔어요. 커밋부터 Vercel 배포까지 혼자 했습니다.

다만 30분은 아니고, 2주 정도 걸렸어요. 되는 것과 안 되는 것이 꽤 명확하게 갈렸는데, 그 경계가 이전 블로그 글들에서 읽은 것과 좀 달랐습니다. 이번 글은 그 2주 동안 알게 된 것들이에요. 실제로 클로드 코드를 활용하면서 **통한 지시와 끝까지 안 통한 지시, 실제로 도움이 됐던 요령, 그리고 결국 손으로 고쳐야 했던 것들을 프롬프트 원문이랑 같이 정리했습니다.** 

---

## Q1\. 어떻게 홈페이지 구축을 직접 해보게 되셨어요?

**김준수** 리브랜딩을 마쳤는데 홈페이지가 옛날 브랜드로 남아 있었어요. 근데 개발 인력이 다 제품에 붙어 있어서 부탁할 상황이 아니었고요. 그때 마침 클로드 코드 후기가 계속 보이던 시기였어요. 디자이너가 혼자 사이트를 만들었다는 글들이요. 어차피 지금 안 하면 계속 밀릴 것 같아서 한번 해보자 했습니다.

**양디** 프레이머나 웹플로우 같은 선택지도 있었을 텐데요.

**김준수** 봤어요. 근데 저희가 만들려던 홈 화면이 자동으로 재생되는 인터랙션이었거든요. 하임덱스는 자연어로 영상을 검색하는 제품이니까 그걸 꼭 보여주고 싶었어요. 근데 노코드 툴 안에서는 안 나올 것 같더라고요. 결국 코드로 가야 한다면 처음부터 코드로 시작하는 게 낫겠다 싶었습니다.

**양디** 코드는 어느 정도 다루세요?

**김준수** 거의 못 다뤄요. HTML이랑 CSS를 보고 "여기를 고치면 되겠다" 정도는 아는데, 직접 쓰지는 못하는 수준이에요. 리액트는 이번에 처음 봤습니다. 세팅은 Vite에 리액트, 테일윈드로 잡았어요. (이 부분은 개발팀의 도움을 받은 점이라..살짝 말씀드립니다.) 미리보기는 로컬에서 띄우고, `main`에 푸시하면 Vercel이 자동으로 배포되는 구조요. 배포 단계를 따로 안 밟아도 되는 건 정말 편했습니다!

---

## Q2\. 첫 화면은 어땠어요?

**김준수** 이건 후기 글들 말이 맞았어요. 진짜 잘 나옵니다. 히어로는 프롬프트 하나로 나왔어요.

> "첨부한 이미지 히어로 스타일처럼 구성을 해줘. 헤더는 건드리지 말고 텍스트랑 버튼을 중앙정렬로, 텍스트 아래에 피그마 화면을 넣어줘. 배경은 브랜드 컬러를 사용해서 그라디언트로 깔아줘."

이거 한 줄에 화면이 떴습니다. 반응형 골격도 같이 잡히고, 컴포넌트도 알아서 나눠주고요. 첫날에 "이거 되겠는데" 싶었어요.

**양디** 브랜드 자산은 어떻게 넘기셨어요? 가이드 PDF를 첨부하신 건가요?

**김준수** PDF는 한 번도 안 넣었어요. 두 가지 경로로 넘어갔습니다.

하나는 **피그마를 MCP로 연결한 것**이에요. 옮길 화면이나 컴포넌트의 링크를 붙여넣으면 그걸 읽고 코드로 재현해줍니다. 이게 생각보다 잘 됐어요.

여기서 실제로 통했던 요령이 두 개 있어요.

> 💡 **피그마에서 안 깨지게 옮기는 법**  
> 1\. 레이어를 전부 **오토 레이아웃**으로 해두세요. 안 돼 있으면 옮길 때 구조가 무너집니다.  
> 2\. 세부 수정할 때는 전체 파일이 아니라 **해당 컴포넌트 링크만** 주세요. 전체를 주면 엉뚱한 데까지 건드립니다.

다른 하나는 **디자인 토큰**이에요. 색이랑 간격, 폰트는 `tailwind.config.js`랑 `index.css`에 `-navy: #234c77` 같은 식으로 박아뒀어요. 딱 떨어지지 않는 값은 `h-[60px]`, `mr-[120px]` 같은 임의값 클래스로 픽셀을 직접 지정했고요.

**양디** 브랜드 가이드에 있던 항목들이 다 전달되던가요?

**김준수** 이게 좀 갈렸어요.

| 전달되는 것            | 전달되지 않는 것      |
| ----------------- | -------------- |
| #0A2240 / #234C77 | "견고하고 안전한 톤으로" |
| 심볼:워드마크 = 3:2     | "명쾌한 인터페이스"    |
| 간격 = 심볼 폭의 3/10   | "지능의 유연성"      |
| 최소 크기 16px        | "한 덩어리로 읽히게"   |

숫자로 쓴 항목은 다 전달됐고, 형용사로 쓴 항목은 하나도 전달이 안 됐습니다.

---

## Q3\. 그럼 후기 글들이랑 달랐던 지점은 뭐였어요?

**김준수** "말로 고치면 된다"는 부분이요.

실제로는 말로 고쳐지는 것과 아무리 말해도 안 고쳐지는 게 딱 나뉘어 있었어요. 후기 글들이 대체로 첫 화면 만드는 데서 끝나는데, 첫 화면은 정말 잘 나옵니다. 문제는 그 다음 2주예요.

첫 결과물을 그대로 배포할 수는 없었어요. 구조는 맞는데 우리 브랜드처럼 안 보였거든요. 거기서부터 계속 다듬는 작업이었는데, 그 과정이 후기에서 본 것보다 훨씬 길었습니다.

---

## Q4\. "여기 8px만 더 띄워줘" 같은 지시는 잘 통했나요?

**김준수** 이게 2주 중에 제일 많이 부딪힌 부분이에요.

잘 통한 지시부터 원문 그대로 옮겨볼게요.

> "로고 간격 120으로"  
> "전체 높이는 40으로"  
> "페이드폭 6%로"  
> "라이브 나우는 35로"

이건 전부 한 번에 통했어요. 반대로 끝까지 안 통한 건 이런 것들이었습니다.

> "마우스를 호버할 때 섹션 위치를 좀 더 위로 올려줘봐"  
> "화면이 커지는 만큼 인터랙션 부분도 비율 유지하면서 커지게"

몇 번을 다시 말해도 원하는 결과가 안 나왔어요.

**양디** 경계가 어디쯤인 것 같으세요?

**김준수** 정리하면 이렇게 되더라고요.

**O 통하는 지시**

- 수치가 명시된 것 (`padding: 24px`)
- 구조 변경 (섹션 순서 바꾸기)
- 반복 패턴 (카드 16개 만들기)
- 이름이 있는 규칙 (`space-4` 같은 토큰명)

**X 끝까지 안 통하는 지시**

- 상대적 판단 ("조금 더", "답답해 보여")
- 전체 리듬 (한 곳을 고치면 앞뒤 균형이 깨짐)
- 광학 보정 (수치상 가운데인데 눈으로는 아닌 것)
- 시각적 위계 (숫자는 다 맞는데 뭘 먼저 보게 되는지가 틀림)

왜 갈리는지는 한 줄로 설명이 돼요. 모델은 렌더된 화면이 아니라 코드를 보고, 디자이너의 판단은 대부분 렌더 결과에 대한 거니까요.

> 💡 **감을 수치로 번역해서 말하기**  
> 제가 바꾼 건 지시 내용이 아니라 말하는 방식이었어요. "8px 더 띄워줘" 대신 `mr-[120px]`, "높이 좀 맞춰줘" 대신 `h-[40px]`. 감을 픽셀이나 토큰 이름으로 번역해서 말하기 시작하니까 통했습니다.

**양디** 좀 아이러니한 지점이 있죠. 하임덱스는 자연어로 영상을 찾게 해주는 회사고, 팀 밸류에도 Intuition — 말 한마디로 충분해야 한다가 있는데요.

**김준수** 네, 그 회사 디자이너가 자연어로 디자인 지시하는 데서 2주 내내 막혔어요.   
사용자가 "그 장면"이라고 말할 때 머릿속 이미지랑 실제로 입력한 문장 사이에 생기는 손실이, 제가 "여기 좀 답답해"라고 말할 때 생긴 손실이랑 같은 종류인 것 같아요.

**양디** 그 경험이 제품 쪽 생각에도 영향을 줬나요?

**김준수** 검색이 안 될 때 그게 사용자 잘못이 아니라는 걸 확실하게 알게 됐어요.

저도 2주 동안 계속 실패했는데, 제가 원하는 걸 몰라서가 아니었거든요. 눈으로는 정확히 아는데 그걸 문장으로 못 옮겼던 거예요. 사용자도 똑같을 거라고 봅니다. 찾으려는 장면은 머릿속에 선명한데, 그걸 검색어로 쓰라고 하면 못 씁니다.

그래서 검색창을 비워두고 "알아서 잘 말해보세요" 하는 게 사실 꽤 불친절한 설계더라고요. 제가 결국 통했던 방식이 감을 수치로 번역한 거였는데, 제품에서도 사용자가 그 번역을 혼자 하게 두면 안 되겠다는 생각을 하게 됐어요.

---

## Q5\. 홈 화면의 자동 재생 인터랙션은 어떻게 만드셨어요?

**김준수** 이건 잘 된 쪽이에요. 원리는 한 문장입니다. **화면은 고정하고, 카메라를 움직입니다.**

**1) 화면을 고정 크기로 그려요**

히어로에 들어가는 데모 화면은 저희 제품 화면이에요. 검색창에 문장을 넣으면 영상 안의 장면이 카드로 뜨는 화면인데, 이걸 `w-[1440px] h-[1024px]` 짜리 고정 크기 리액트 화면으로 만들어요. 바깥 프레임은 컨테이너 너비를 재서 `transform: scale(너비/1440)`으로 축소해 담고요. 이러면 어떤 화면 크기에서도 비율이 안 깨져요.

**2) 카메라처럼 잘라서 보여줘요**

화면 크기는 절대 안 바꿔요. 대신 바깥 프레임이 카메라가 돼서 고정된 1440×1024 화면을 `overflow-hidden`으로 잘라 보여주고, 안쪽에 `transform: translate(...) scale(...)`을 줘서 확대하고 이동시킵니다.

- 처음엔 검색창을 `zoom 1.7`로 확대해서 보여주고
- 타이핑이 끝나면 `zoom 1`로 줌아웃하면서 전체 화면 노출
- 이어서 스크롤

"위에서 아래로 카메라 무빙"이나 "특정 씬 박스로 이동" 같은 것도 전부 이 translate/scale 이동이에요.

**3) 움직임은 상태값이랑 타이머 루프예요**

`useEffect` 안에서 `async run()`이 무한 반복하면서 단계 별로 상태를 바꿉니다. `setTyped`(한 글자씩), `setSearched`(카드 등장), `setScroll`, `setZoom`, `setCursor` 이런 식으로요. 단계 사이는 `await wait(ms)`로 타이밍을 잡습니다.

**양디** 이건 한 번에 나왔나요?

**김준수** 골격은 한 덩어리 지시로 나왔어요.

> "1\. 검색창에 문장이 타이핑 / 2\. 카드가 검색되어 나오는 / 3\. 스크롤과 동시에 마우스 포인터로 카드를 훑는 모션 / 4\. 반복"

구조는 이걸로 잡혔어요. 대신 디테일은 수십 번 튜닝했습니다. 커서 움직임이 특히 그랬어요.

> "마우스 포인터는 장갑 형태로 바꾸고, 움직임을 좀 더 사람답게. 지금은 너무 기계적으로 좌→우로 훑는다."

그러다 결국엔

> "마우스 커서로 훑는 거는 그냥 이전으로 다시 돌려줘."

이렇게 넣었다 뺐다를 반복했습니다.

> 💡 **복잡한 인터랙션은 단계를 번호로 쪼개서**  
> 한 덩어리로 설명하는 것보다 "1\. 타이핑 / 2\. 카드 등장 / 3\. 스크롤 / 4\. 반복"처럼 순서를 번호로 주면 골격이 훨씬 정확하게 나옵니다.

---

## Q6\. 실패한 사례도 있었을 것 같은데요.

**김준수** 성격이 다른 세 종류가 있었어요.

**하나, 지시 범위를 넘어서는 경우.** "모바일에서만 바꿔달라"고 했는데 전 구간이 바뀌어 있었어요. 제가 "모바일에서만 조정해준 거 맞지?"라고 다시 물어봐서 발견했습니다. 안 물어봤으면 그대로 배포됐을 거예요.그래서 크톱은 앞서 말한 카메라 프레임을 aspect-\[1040/470\] 같은 비율 고정으로 담았고, 모바일은 max-sm: 브레이크포인트로 너비를 꽉 채우고 비율은 자동으로 두는 방식이었어요. 인터랙션 영역은 화면 끝까지 붙이려고 w-screen으로 풀블리드 처리했고요.

데스크톱은 앞서 말한 카메라 프레임을 `aspect-[1040/470]` 같은 **비율 고정**으로 담았고, 모바일은 `max-sm:` 브레이크포인트로 **너비를 꽉 채우고 비율은 자동**으로 두는 방식이었어요. 인터랙션 영역은 화면 끝까지 붙이려고 `w-screen`으로 풀블리드 처리했고요.

풀블리드를 하면 가로 스크롤이 생기는데, 전역에 `overflow-x-clip`을 걸어서 막았습니다.

> 💡 **"모바일에서만"보다 브레이크포인트 이름을 부르세요**  
> 이것도 결국 감을 토큰 이름으로 번역한 거예요. `max-sm:`이라고 말하면 그 범위만 건드립니다.

**둘, 겉보기엔 정상인데 실제로는 터지는 것.** 크롬 자동번역이 켜진 상태로 접속하면 화면 전체가 백지로 떴어요. 코드는 멀쩡하고 제 브라우저에서는 아무 문제가 없었고요. 외국어 브라우저를 쓰는 실제 사용자한테만 터지는 버그였습니다. 원인 찾고 나서 `translate="no"`로 막았는데, 이건 제가 우연히 발견한 거지 알려준 게 아니에요.

**셋, 회귀형 버그.** 전역 `scroll-behavior: smooth`랑 스크롤 초기화가 충돌해서 "새로고침해야 화면이 뜬다"는 제보를 받았어요. 특정 화면 크기랑 스크롤 상태에서만 재현돼서 원인 찾는 데 시간이 걸렸습니다.

**양디** 정리하면요?

**김준수** 로컬 미리보기에서 보이는 문제는 대체로 잘 고쳐져요. 문제는 **내 환경에서 안 보이는 것**이더라고요. 다른 언어, 다른 화면 크기, 다른 스크롤 상태. 여기는 아직 사람이 의심하고 찾아야 하는 것 같아요.

> 💡 **배포 전에 이것만은 확인하세요**  
> 크롬 자동번역 켜고 한 번, 창 크기 줄여서 한 번, 새로고침 말고 링크로 진입해서 한 번. 이 세 가지는 로컬 미리보기로는 절대 안 걸립니다.

---

## Q7\. 결과물에서 'AI가 만든 티'는 어떻게 빼셨어요?

**김준수** 관용구를 명시적으로 밀어내는 식으로 했어요. 실제로는 이런 지시였습니다.

> "일반 아이콘 말고 내가 보내줬던 이미지로… 라운드랑 그림자 빼고 각진 라인 스타일로"  
> "배경 흰색은 지워줘"

'옮기지 않고 바로 분석' 섹션 우측 비주얼은 여러 번 갈아엎었어요. 처음 나온 건 어디서 본 것 같은 카드였는데, 결국 블루프린트 라인 카드 형태로 갔습니다.

**양디** 금지 목록을 명시하는 방식이 통하던가요?

**김준수** 통했어요. 중앙정렬 히어로에 버튼 두 개, 3열 카드 그리드, 과한 그라데이션, 의미 없는 아이콘. 이런 걸 "쓰지 말 것"으로 못박으면 안 나옵니다. 다만 목록에 없는 관용구는 계속 나와요.

> 💡 **금지 목록은 계속 자라는 문서로**  
> 한 번 쓰고 끝나는 게 아니라, 작업하다가 "또 이 패턴이네" 싶을 때마다 추가하는 식으로 관리했어요.

## Q8\. 영문 페이지도 있던데, 다국어는 어떻게 하셨어요?

**김준수** 언어를 **URL에서 파생**시켰어요. 한국어는 `/`, 영어는 `/en`. 브라우저에 저장해두는 방식은 안 썼습니다.

문구는 `t('한국어','English')` 이렇게 쌍으로 두고, 내부 링크는 `/en`을 자동으로 붙여주는 Link 래퍼를 하나 만들어서 썼어요. 링크마다 언어를 신경 쓸 필요가 없어집니다.

검색 노출 쪽은 페이지마다 canonical이랑 hreflang을 자동으로 넣게 했고, 빌드할 때 영어 메타 셸(`/en/index.html`)을 미리 만들어두게 했어요. 이걸 안 하면 영어 페이지 링크를 공유했을 때 미리보기가 한국어로 뜨더라고요.

> 💡 **다국어는 URL에 넣는 게 안전합니다**  
> 브라우저에 저장하는 방식이면 공유 링크로 들어온 사람이 엉뚱한 언어를 보게 됩니다. 공유 미리보기까지 언어를 맞추려면 빌드 단계에서 메타 셸을 따로 만들어야 해요.

---

## Q9\. 결국 직접 손으로 고치신 부분은 어디였어요?

**김준수** 제일 오래 걸린 건 파트너 로고 정렬이었어요.

로고를 다 같은 높이로 맞췄더니, 정사각형에 가까운 로고(KT)는 크게 보이고 긴 워드마크(LIVENOW)는 과하게 커 보이더라고요. 높이가 같은 거랑 시각적 무게가 같은 건 다르니까요. 처음엔 코드에서 KT를 0.8배, LIVENOW를 1.5배로 보정했어요. 근데 이게 근본 해결이 아니어서, 결국 로고 파일 자체를 149px 높이 기준으로 정규화해서 다시 넣었습니다.

이 판단은 지시로 안 내려가요. 수치를 주면 그대로 해주는데, "몇으로 해야 눈에 같아 보이는지"는 결과를 보고 사람이 정해야 하더라고요.

그 밖에 계속 방향을 잡아줘야 했던 건 404 페이지 같은 거예요. 우주 테마로 가고, 404의 0을 회사 로고로 바꾸고, 페이드를 아래로 볼록하게. 분위기 판단은 전부 제가 방향을 지정했어요. 페이드 곡률이나 자간 같은 미세 조정도 마찬가지고요.

**양디** 디자이너분들이 이 글을 읽는 이유가 "그럼 나는 대체될까"일 것 같은데요.

**김준수** "그래도 사람이 필요해요" 같은 말을 하고 싶진 않아요. 구체적으로는 만드는 일은 위임이 되고, 판정하는 일은 안 되는 것 같아요. 로고를 0.8배랑 1.5배로 정한 건 저고, 그걸 코드로 옮긴 건 모델이었으니까요.

## Q10\. 팀원들이 제일 환호한 배경의 별자리나 404 페이지 효과는 어떻게 만드셨어요?

**김준수** 이건 이미지가 아니라 **HTML Canvas 2D로 직접 그린** 거예요.

점이 흩어져 있고 가까운 것끼리 선으로 이어지는 그림인데, 이 형태로 간 이유가 있어요. 저희가 영상을 다루는 방식이 딱 이렇거든요. 장면 하나하나가 점이 되고, 비슷한 장면끼리 가까이 놓입니다. 배경에 제품 원리를 깔아두고 싶었어요.

홈 히어로 배경 별자리(`NetworkGraph`)랑 404의 원근 스타필드(`SpaceField`)가 그렇습니다. 원리는 이래요.

- 노드를 좌표에 뿌리는데, 완전 규칙적인 격자가 아니라 **살짝 흔든 격자**로 배치해요. 그래야 인공적으로 안 보입니다.
- 노드끼리 **거리를 재서 가까운 것들만 선으로 연결**합니다.
- 그 위로 **스캔 빔**이 지나가면서 노드가 반짝이고요.
- 전체는 `requestAnimationFrame` 루프로 계속 돕니다.

가장자리를 자연스럽게 흐리는 건 CSS `mask-image`에 그라디언트를 걸어서 처리했어요. 별이 어디까지 보일지도 이걸로 조절했습니다. Q4에서 "페이드폭 6%로" 같은 지시가 잘 통했다고 했는데, 그게 바로 이 부분이에요.

404의 "0을 회사 로고로 바꾸는 것"은 로고 SVG를 CSS 마스크로 써서 흰색으로 채우는 방식으로 했고요.

하단 로고 마퀴는 CSS 애니메이션이에요. `translateX`를 무한 루프로 돌리는데, **로고 세트를 두 벌 이어붙여 놓으면** 끊김 없이 이어지는 것처럼 보입니다.

> 💡 **배경 효과는 이미지보다 Canvas가 낫습니다**  
> 이미지로 만들면 화면 크기마다 다시 만들어야 하는데, Canvas로 그리면 좌표만 다시 계산하면 돼요. 파일 용량도 없고요. 이 부분은 제가 코드를 못 써도 원리만 말하면 나왔습니다.

---

## 2주 동안 배운 것

정리하면 이렇습니다.

1. **첫 화면은 정말 한 번에 나옵니다.** 후기 글들이 과장이 아니에요. 다만 대부분 거기서 끝나고, 실제 작업은 그 다음부터입니다.
2. **피그마는 오토 레이아웃이 전제입니다.** 그리고 수정할 때는 전체 파일이 아니라 컴포넌트 링크만 주세요.
3. **감을 수치로 번역해서 말하세요.** "조금 더"는 안 통하고 `mr-[120px]`은 통합니다.
4. **복잡한 인터랙션은 순서를 번호로 쪼개서** 주면 골격이 정확하게 나옵니다.
5. **금지 목록을 만들어두세요.** 안 적으면 학습 분포의 평균값이 그대로 나옵니다.
6. **내 화면에서 안 보이는 것부터 의심하세요.** 다른 언어, 다른 화면 크기, 다른 진입 경로. 여기서 터집니다.
7. **광학 보정은 아직 사람 몫입니다.** 수치를 주면 그대로 해주지만, 그 수치를 정하는 건 결과를 보는 사람이에요.

**양디** 마지막으로, 브랜드 가이드에 대한 생각이 좀 바뀌셨어요?

**김준수** 사람이 읽고 지키라고 만든 문서였는데, 결과적으로 기계가 읽는 사양서로 쓰였어요. 색이랑 간격이 잘 지켜진 건 그게 토큰으로 존재했기 때문이고, 문서 안에 문장으로만 있었으면 하나도 안 지켜졌을 거예요.

그리고 하나 더요. AI는 만들어주는데 이게 좋은지는 판정을 안 해주더라고요. 판정 기준을 가진 사람만 결과물을 통제할 수 있고, 기준이 없으면 그럴듯한 데서 멈추게 되는 것 같아요.

---

## 마무리

3부작이었습니다. \[[1편 — 리브랜딩 범위를 어떻게 잘랐나](https://blog.heimdex.co/ko/heimdex-rebranding-brand-language-no-upload-ko/)\] / \[[2편 — 로고와 컬러](https://blog.heimdex.co/ko/heimdex-rebranding-logo-design-ko/)\]

하임덱스는 영상을 옮기지 않고 고객 서버 안에서 말로 찾게 만드는 팀이에요. 함께 만들 분을 찾고 있습니다.

채용 문의: \[[채용 공고 링크](https://heimdex-dev.notion.site/?pvs=74&ref=blog.heimdex.co)\] / [heimdex@heimdex.co](mailto:heimdex@heimdex.co)