# LiftKit - 완벽주의자를 위한 UI 프레임워크

> Clean Markdown view of GeekNews topic #26582. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26582](https://news.hada.io/topic?id=26582)
- GeekNews Markdown: [https://news.hada.io/topic/26582.md](https://news.hada.io/topic/26582.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-02-11T08:33:08+09:00
- Updated: 2026-02-11T08:33:08+09:00
- Original source: [chainlift.io](https://www.chainlift.io/liftkit)
- Points: 16
- Comments: 3

## Summary

모든 UI 요소를 **황금비 기반의 단일 스케일 팩터**로 계산해, 버튼·카드·입력창 등에서 자동으로 시각적 균형을 맞추는 오픈소스 프레임워크입니다. 서브픽셀 단위의 정밀한 비율 계산과 **모듈형 색상 제어 패널**을 통해, 초기 MVP 단계에서도 완성도 높은 시각적 품질을 구현하도록 설계되었습니다.

## Topic Body

- **대칭성과 비율 문제를 해결하는 오픈소스 UI 프레임워크**로, 모든 요소가 황금비에서 파생되는 구조  
- 버튼, 카드, 입력창 등에서 **시각적 균형과 공간감**을 자동 보정해 자연스러운 비율 유지  
- **글로벌 스케일 팩터**를 기반으로 서브픽셀 단위의 정밀한 비율 계산을 수행해 일관된 조화 구현  
- **모듈형 색상 제어 패널**을 통해 실시간 색상 미리보기와 테마 조정이 가능하며, 타이포그래피·머티리얼·스케일링 등 세부 설정 지원  
- MVP 단계에서도 **완성도 높은 시각적 품질**을 제공해 초기 디자인의 완성도를 높이는 도구로 주목  
  
---  
  
### LiftKit 개요  
- LiftKit은 **대칭성 문제를 해결하는 오픈소스 UI 프레임워크**  
  - 주요 목적은 UI 구성요소 간의 시각적 균형을 자동으로 맞추는 것  
  - “Extremely Early Access” 단계로, 초기 실험적 버전  
- 프레임워크의 모든 비율은 **황금비(golden ratio)** 에서 파생되어, 마진·폰트 크기·테두리 반경 등 모든 요소가 조화롭게 렌더링  
- 단일 **글로벌 스케일 팩터(global scale factor)** 를 사용해 서브픽셀 단위의 정확도로 비율을 계산함  
  
### 주요 구성요소 및 기능  
- **버튼 컴포넌트**는 아이콘이 포함될 때 발생하는 시각적 패딩 불균형을 자동 보정  
  - 폰트 크기에 따라 패딩을 동적으로 조정해 좌우 균형을 유지  
- **카드 컴포넌트**는 `opticalCorrection` 속성을 제공해, 콘텐츠의 줄 간격(line-height)으로 인한 여백 불균형을 보정  
- **입력 필드(Input)** 는 황금비 기반의 간격 설계를 통해 “숨 쉴 공간이 있는” 형태로 표현  
  
### 비율과 시각적 만족감  
- LiftKit은 **“oddly-satisfying” 비율**을 구현하기 위해 단일 스케일 팩터에서 파생된 비율 체계를 사용  
- 모든 구성요소는 **서브픽셀 정확도(subpixel accuracy)** 로 계산되어, 미세한 시각적 불균형을 최소화  
- 이러한 접근은 사용자가 설명하기 어려운 **“자연스럽고 조화로운 느낌”** 을 제공  
  
### 색상 및 테마 제어  
- LiftKit은 **모듈형 색상 제어 패널(modular control panel)** 을 제공  
  - 작업 중 파일에 추가해 **실시간 색상 미리보기** 가능  
  - 미세한 색조 변화부터 강한 색상 플러딩까지 다양한 조정 지원  
- 색상 외에도 다음 항목을 CSS에서 직접 조정 가능  
  - **Typography**: 폰트 패밀리를 넘어서는 세밀한 전역 타이포그래피 제어  
  - **Custom Materials**: glass, flat, rubber 등 프리셋 기반의 새로운 머티리얼 생성  
  - **Scaling**: 텍스트뿐 아니라 간격 등 전체 요소가 함께 스케일링  
  - **Component-specific configs**: 개별 컴포넌트의 외형을 독립적으로 조정 가능  
  
### 세밀한 디테일과 디자인 품질  
- LiftKit은 **MVP 단계에서도 완성도 높은 시각적 품질**을 구현하도록 설계  
  - “Make MVP’s that don’t look like MVP’s”  
- 기본적으로 **지각적으로 정확한 간격(perceptually accurate spacing)** 을 제공해, 사용자가 느끼는 균형감을 극대화  
- 이러한 세밀한 디테일은 “설명하기 어렵지만 더 좋아 보이는” 결과를 만들어냄

## Comments



### Comment 51866

- Author: roxie
- Created: 2026-02-25T14:06:48+09:00
- Points: 1

랜딩페이지에 전 후 비교가 있는데 둘다 좋아보이네요 ..

### Comment 50997

- Author: heal9179
- Created: 2026-02-11T13:12:47+09:00
- Points: 1

보통 황금비보단 메이저 세컨드(1.125) 사용하지 않나요..?

### Comment 50965

- Author: neo
- Created: 2026-02-11T08:33:08+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46952118) 
- Chrome을 설계할 때는 **미니멀리즘**이 핵심이었음  
  화면이 작던 시절이라 세로 공간을 줄이는 데 많은 시간을 썼음  
  탭 스트립, 툴바, 타이틀바의 비율을 황금비라고 설명하면 논쟁이 줄어들었지만, 사실 전혀 황금비가 아니었음  
  **빛, 색상, 라운딩, 시각적 강도** 같은 요소가 훨씬 더 중요함
  - 내가 제일 좋아하는 디자인 밈은, 로고를 만든 뒤 나중에 “깊은 사고의 결과”라며 **황금비 도형**을 덧붙이는 것임  
    사실 조금만 조정하면 뭐든 황금비에 맞출 수 있음. 이런 건 ‘영적’ 감성 좋아하는 사람들에게 특히 먹힘
  - 예전 Chrome의 **미니멀리즘**이 정말 좋았음  
    지금도 화면이 커졌다고 공간을 낭비하고 싶진 않음
  - 아이러니하게도, 황금비 예시로 든 웹사이트의 디자인이 비교 대상보다 더 별로인 경우가 많음  
    결국 **취향의 문제**인 듯함
  - “수직 리듬”, “모듈러 스케일” 같은 개념은 웹에서는 거의 **무의미한 미신** 같음  
    인쇄물에서는 유용하지만, 디지털에서는 오히려 가독성을 해침  
    아이콘을 억지로 같은 형태로 맞추거나 색을 없애는 것도 **식별성**을 떨어뜨림
  - “황금비는 우리가 길에서 만난 친구였음”이라는 농담도 나왔음  

- 나는 LiftKit의 제작자임  
  이 프로젝트는 아직 **매우 초기 단계**이고, 혼자서 취미로 만드는 중임  
  오픈소스이며 무료임 → [GitHub 링크](https://github.com/Chainlift/liftkit)  
  피드백 대부분은 이미 [Reddit 스레드](https://www.reddit.com/r/webdev/comments/1m41arx/i_spent_18_months_building_a_design_system_that/)에서 논의 중임  
  현재 **Radix primitives로 재구축**하고 **문서 개선**이 우선순위임  
  개요는 [YouTube 영상](https://www.youtube.com/watch?v=r1DANFZYJDw)에서도 볼 수 있음
  - 프로젝트가 멋지다고 생각함. 비판도 **전문적인 피드백**이라 오히려 칭찬으로 받아들여야 함  
    대부분의 프론트엔드 개발자가 꿈꾸는 “완벽히 일관된 디자인 시스템”을 실제로 구현했다는 점이 대단함
  - Reddit에서 7개월 전 “컴포넌트 렌더링은 다음 우선순위”라고 했는데, 지금은 언급이 없음  
    **자체 문서에서 컴포넌트를 렌더링하지 못하는 UI 프레임워크**는 신뢰하기 어려움
  - 아이디어는 좋고 홈페이지도 **시각적으로 만족감**이 있음  
    iOS 앱에서 황금비를 적용해보려 했는데, 제작 과정을 공유해줬으면 함
  - Radix 대신 **Base UI**나 **React Aria**도 참고해보길 권함
  - 비교 이미지에서 경쟁 프레임워크를 **의도적으로 저대비로 처리**한 건 공정하지 않음  

- 전후 비교 스크린샷을 보여줄 때는 **드래그 슬라이더** 대신 버튼으로 즉시 전환되게 하는 게 좋음  
  클릭할 때마다 눈이 직접 차이를 인식하게 됨  
  관련 참고: [Andrei Herasimchuk의 Quora 답변](https://www.quora.com/Why-does-Adobe-Photoshop-differentiate-between-Undo-and-Step-Backwards-The-consequence-of-this-is-that-you-cant-repeatedly-hit-Control-Z-to-undo-but-rather-the-awkward-Control-Z-Control-Alt-Z-Control-Alt-Z)
  - 제작자인 내가 보기에도 지금 슬라이더는 **터치스크린에서 엉망**임  
    좌우로 움직이려 하면 위아래로 미끄러짐. 피드백 고마움, 꼭 고칠 예정임
  - 사진 비교용으로는 슬라이더가 표준이긴 하지만, **좌우 라벨**을 붙이고 클릭 시 원본을 잠깐 보여주는 식으로 개선할 수 있음  
    예시 영상: [LUTLab Viewer](https://lutlab.com/#viewer-photo)
  - 나도 처음엔 어느 쪽이 LiftKit인지 헷갈렸음  
  - “어느 쪽이 더 좋아 보일까?”라는 게임처럼 느껴졌음  
  - 각 이미지에 “material-style”, “liftkit” 라벨을 넣고 슬라이더 이동에 따라 가려지게 하면 명확해질 것임  

- 처음엔 이 사이트가 **패러디**인 줄 알았음  
  실제라니 놀랐고, 구성 요소들이 중심이 어긋나 보이고 **시각적 무게감**이 불균형해 보였음
  - 나도 매번 ‘이게 더 낫네’라고 생각했는데, 알고 보니 항상 **이전(before)** 쪽이었음
  - **수학적으로 완벽한 비율**이 항상 보기 좋은 건 아님  
    실제로는 몇 픽셀씩 조정해야 눈에 자연스러움
  - 전체적으로 뭔가 어긋나 있음  
  - **1.618 비율**은 실제 디자인에서는 간격이 너무 큼  

- “optical correction none/top” 관련해서, 대문자 높이를 직접 측정해서 맞추는 건지, 아니면 폰트 메트릭을 그대로 쓰는 건지 궁금함  
  폰트 내부 수치를 믿기 어렵고, 실제 글리프는 그 수치를 따르지 않음  
  이런 점이 **폰트 작업의 악몽**이 됨  

- 모든 컴포넌트를 **이미지로만 보여주는 UI 프레임워크**는 신뢰하기 어려움
  - 드롭다운을 눌러봤는데, 아예 **이미지조차 없음**
  - 실제 CSS를 공개하면 사람들이 복사할 수 있으니, **‘비밀 황금비 코드’** 를 지키려는 걸지도 모름
  - 전문가를 고용해서 도와달라는 인상도 받음
  - Firefox에서 스크롤할 때 **프레임 드랍**이 발생함
  - UI가 직접 렌더링되지 않고 React나 Next.js에 의존하는 건 **UI 키트로서 부적절**하다고 느낌  

- 가격을 찾아봤는데, “Contact Sales”만 있고 바로 계산기를 써야 했음  
  10개 상위 페이지 + 5개 하위 페이지로 계산하니 **$16,500**이 나와서 놀랐음
  - 그건 **에이전시 서비스용 계산기**임. LiftKit 자체는 무료임  
    누군가 “FUCK_YOU@DUMB.COM”으로 폼 보낸 게 혹시 당신인가?  
  - 맞음, 실제로는 **오픈소스 라이브러리**이고 무료로 사용할 수 있음  

- 대부분의 UI 라이브러리가 놓치는 부분이 있음  
  **둥근 모서리 박스가 중첩될 때**, 간격만큼 border-radius를 더해줘야 함  
  그렇지 않으면 **시각적으로 어긋난 느낌**이 남음  
  예시: [Snackbar 컴포넌트](https://www.chainlift.io/components/snackbar), [Chrome 탭 레이아웃 스크린샷](https://i.imgur.com/uPuTtNb.png)  

- 관련 연구 논문도 있음 → [PMC 논문 링크](https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=The%20golden%20ratio%20or%20golden,the%20golden%20number))  

- LiftKit의 설명 중 “모든 요소가 황금비에서 파생되어 완벽한 조화를 이룬다”는 문구가 있었는데, **아이러니인지 진심인지** 모르겠음
  - 하지만 페이지를 열자마자 버튼이 이상하게 **시각적으로 만족스러웠음**  
    뭔가 **이론 이상의 감각적 조화**가 있는 듯함