AI가 만든 페이지는 비슷한 틀이 많다: oil-ui를 활용해 UI 디자인 개선하기

AI에게 페이지 생성을 맡기면 종종 같은 템플릿만 반복됩니다. 그라데이션 보라색, 중앙에 큰 제목, 그리고 세 개의 모서리가 둥근 카드들—한눈에 AI가 만든 것이라는 것을 알 수 있습니다.

최근 저는 'oil-ui'라는 스킬을 접하게 되었는데, 이것은 AI의 UI 디자인 실력을 향상시키기 위해 특별히 설계되었습니다. 이 도구는 먼저 어떤 종류의 제품인지 파악하고, 유사한 제품들 중 가장 눈에 띄는 두세 가지 사례를 골라 분석합니다. 그리고 무엇을 유지하고 무엇을 교체할지 결정해줍니다.

실제로 사용하기 전에, 다섯 가지 스케일(energy, completeness, density, weight, seriousness)을 사용하여 분위기를 설정합니다. '프리미엄'이나 '미니멀리스트' 같은 모호한 용어는 어떤 폰트를 사용할지, 얼마나 많은 여백을 남길지, 또는 색상이 어느 정도 영역을 차지해야 하는지와 같은 구체적인 지침으로 번역됩니다.

GitHub:
http://github.com/oil-oil/oil-ui
여러 목업(mockups)이 동일한 비교 페이지에 배치되어 있으며, 여기서 데스크톱과 모바일 크기 사이를 토글할 수 있습니다. 마음에 드는 부분이 있다면 'Select' 버튼을 누르고 문장 하나를 복사하여 에이전트에게 다시 붙여넣으면, 그 부분부터 계속해서 빌드해 나갑니다.

또한 네 가지 요소(skeleton, typography, color, main visuals) 전반에 걸쳐 오버랩되는 부분이 최대 한 개만 있도록 하여 명확한 차이를 유지하도록 합니다.

공식 갤러리에는 영어 학습 앱, 차량 호출 앱, 영화 카메라 웹사이트와 같은 작업물들이 전시되어 있으니 먼저 그 효과들을 확인해 볼 수 있습니다.

오픈 소스 버전은 추가 API 키가 필요 없이 즉시 설치하고 실행할 수 있습니다. AI가 생성한 페이지가 획일적인 느낌을 덜 갖게 하고 싶다면 한번 사용해 보세요.