▲

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

(chainlift.io)
11P by GN⁺ 12시간전 | ★ favorite | 댓글 2개
  • 대칭성과 비율 문제를 해결하는 오픈소스 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) 을 제공해, 사용자가 느끼는 균형감을 극대화
  • 이러한 세밀한 디테일은 “설명하기 어렵지만 더 좋아 보이는” 결과를 만들어냄
▲
heal9179 8시간전  [-]

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

답변달기
▲
GN⁺ 12시간전  [-]
Hacker News 의견들

  • Chrome을 설계할 때는 미니멀리즘이 핵심이었음
    화면이 작던 시절이라 세로 공간을 줄이는 데 많은 시간을 썼음
    탭 스트립, 툴바, 타이틀바의 비율을 황금비라고 설명하면 논쟁이 줄어들었지만, 사실 전혀 황금비가 아니었음
    빛, 색상, 라운딩, 시각적 강도 같은 요소가 훨씬 더 중요함

    • 내가 제일 좋아하는 디자인 밈은, 로고를 만든 뒤 나중에 “깊은 사고의 결과”라며 황금비 도형을 덧붙이는 것임
      사실 조금만 조정하면 뭐든 황금비에 맞출 수 있음. 이런 건 ‘영적’ 감성 좋아하는 사람들에게 특히 먹힘
    • 예전 Chrome의 미니멀리즘이 정말 좋았음
      지금도 화면이 커졌다고 공간을 낭비하고 싶진 않음
    • 아이러니하게도, 황금비 예시로 든 웹사이트의 디자인이 비교 대상보다 더 별로인 경우가 많음
      결국 취향의 문제인 듯함
    • “수직 리듬”, “모듈러 스케일” 같은 개념은 웹에서는 거의 무의미한 미신 같음
      인쇄물에서는 유용하지만, 디지털에서는 오히려 가독성을 해침
      아이콘을 억지로 같은 형태로 맞추거나 색을 없애는 것도 식별성을 떨어뜨림
    • “황금비는 우리가 길에서 만난 친구였음”이라는 농담도 나왔음

  • 나는 LiftKit의 제작자임
    이 프로젝트는 아직 매우 초기 단계이고, 혼자서 취미로 만드는 중임
    오픈소스이며 무료임 → GitHub 링크
    피드백 대부분은 이미 Reddit 스레드에서 논의 중임
    현재 Radix primitives로 재구축하고 문서 개선이 우선순위임
    개요는 YouTube 영상에서도 볼 수 있음

    • 프로젝트가 멋지다고 생각함. 비판도 전문적인 피드백이라 오히려 칭찬으로 받아들여야 함
      대부분의 프론트엔드 개발자가 꿈꾸는 “완벽히 일관된 디자인 시스템”을 실제로 구현했다는 점이 대단함
    • Reddit에서 7개월 전 “컴포넌트 렌더링은 다음 우선순위”라고 했는데, 지금은 언급이 없음
      자체 문서에서 컴포넌트를 렌더링하지 못하는 UI 프레임워크는 신뢰하기 어려움
    • 아이디어는 좋고 홈페이지도 시각적으로 만족감이 있음
      iOS 앱에서 황금비를 적용해보려 했는데, 제작 과정을 공유해줬으면 함
    • Radix 대신 Base UI나 React Aria도 참고해보길 권함
    • 비교 이미지에서 경쟁 프레임워크를 의도적으로 저대비로 처리한 건 공정하지 않음

  • 전후 비교 스크린샷을 보여줄 때는 드래그 슬라이더 대신 버튼으로 즉시 전환되게 하는 게 좋음
    클릭할 때마다 눈이 직접 차이를 인식하게 됨
    관련 참고: Andrei Herasimchuk의 Quora 답변

    • 제작자인 내가 보기에도 지금 슬라이더는 터치스크린에서 엉망임
      좌우로 움직이려 하면 위아래로 미끄러짐. 피드백 고마움, 꼭 고칠 예정임
    • 사진 비교용으로는 슬라이더가 표준이긴 하지만, 좌우 라벨을 붙이고 클릭 시 원본을 잠깐 보여주는 식으로 개선할 수 있음
      예시 영상: LUTLab Viewer
    • 나도 처음엔 어느 쪽이 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 컴포넌트, Chrome 탭 레이아웃 스크린샷

  • 관련 연구 논문도 있음 → PMC 논문 링크)

  • LiftKit의 설명 중 “모든 요소가 황금비에서 파생되어 완벽한 조화를 이룬다”는 문구가 있었는데, 아이러니인지 진심인지 모르겠음

    • 하지만 페이지를 열자마자 버튼이 이상하게 시각적으로 만족스러웠음
      뭔가 이론 이상의 감각적 조화가 있는 듯함
답변달기