왕논의 연구실

저는 디자인을 전문으로 하지 않습니다. 하지만, 간단하게라도 자동으로 만들어주는 것들이 있었으면 좋겠고, 기왕이면 '자동'으로 이른바 '있어보이게' 만들고 싶습니다. 그래서 찾아본 디자인 AI들을 정리해 보았습니다. 1. MushoMusho.ai Musho.aiMusho turns your prompts into nearly-complete, dev-ready websites with simple layouts, great copy, and gorgeous images.musho.ai 정확히는 figma의 플러그인 툴입니다. 찾아본 바로는 약간 예전 트렌드에 맞춰서 만들어주지만, 기존 figma를 그대로 이용할 수 있다는 것이 장점입니다.무료 라이센스는 없고, 3가지 구독이 있습니다. 리믹스? 제네레이션..

개인 앱들을 만들면서 처음에는 완성에만 목적을 두고 후순위로 제쳐두었던 '디자인'이라는 것에 신경을 써야겠다는 생각이 들었습니다. 같은 기능을 하는 앱들이더라도 디자인이 다르면, 사용편의성과 접근성이 달라지는 것을 느꼈기 때문입니다. 그런데 문제는 개발자로서 디자인을 공부하는 것이 디자인을 전문적으로 다루는 디자이너들에 비해 떨어지는 것은 자명한 사실이고, 실제로 디자인 해보니 개인적으로 디자인적 센스가 많이 부족함을 느꼈습니다. 그렇다면 내가 처음부터 제작하기보다는 디자인적인 트렌드를 따라하는 것이 좋겠다는 생각에 기존 트렌드와 함께 현재의 트렌드까지 공부해보았습니다. 1. 스큐어모피즘 실재하는 사물의 본래 형태와 질감 그대로 디자인으로 재현한 것입니다. 그렇다고 완벽한 재현을 목적으로 하는 것이 아니..

개발자로서 디자인을 하는 것은 맨땅에 헤딩하는 느낌이 듭니다. 디자인을 시작하는데 있어서 하얀 빈 화면을 보고 있자면, 어디서부터 시작해야하는지 혼란스럽기만 합니다. 어떻게 시작해야할지, 어떻게 그려나가야할지 애매한데 있어서 기준으로 사용할 수 있는 것 중 8 그리드 시스템이 있습니다. 기본 사용법 기본적인 사용법은 높이, 너비, 여백, 마진 등 수치를 8의 배수로 정하는 것입니다. 8인 이유 일단 여러가지 화면에서 픽셀을 맞출 수 있기 때문입니다. 5의 배수는 3/4, 1.5배 하면 깨집니다. 그러나 8은 깨끗하게 만들어집니다. 아이폰 기기들의 사이즈를 보시면 알겠지만 8의 배수나 8로 조합할 수 있는 수가 많습니다. 장점 일관성과 안정감 같은 수치를 적용하여 만들어진 UI는 일관적이고 안정적인 느낌을..

Figma를 이용하여 그라데이션 배경을 만드는 방법을 알려드릴께요 1) Linear 선택 그라데이션을 입힐 오브젝트를 선택한 후, Fill 칸에 있는 색깔 부분을 누릅니다. 그리고 열린 창 상단에 있는 solid부분을 누릅니다. 열린 메뉴 중에서 Linear 부분을 누릅니다. 2) 색 선택 같은 번호끼리 색을 적용시킵니다. 원하는 색을 골라서 그라데이션을 적용하면 됩니다. 색상 밑 슬라이더는 불투명도입니다. 100%로 하면 끝까지 선명하고, 0%로 하면 내려갈수록 투명해집니다. 번외) 그라데이션 라인 추가하기 도형에 있는 슬라이더나, 색상 칸에 있는 슬라이더 둘 중 아무거나 슬라이더 사이를 누르면, 그라데이션 색상을 추가할 수 있습니다.