UI/UX 한 번 배워보겠다고 청강 중인데
가만히 따져보니 이번에 사례글 쓰는 것 말고
다음 번에는 시간이 안될 것 같다는 생각이 번쩍 들었습니다.
아, 이거 용두사미가 되겠는걸? 쩝.......
아직 Figma 한 번도 사용 안했는데....
그래서 현실과 급 타협합니다.
그냥 허접하기 그지 없더라도 일단 만드는 흉내만 내 보고
그래서 Figma 맛이라도 좀 보자고....
목표: Figma로 웹페이지 초안을 2 페이지 만들어서 서로 연결하기
UX Flow는 생각하고 정리 중이지만 2페이지만 만드는 것이니
UX 크게 신경 쓸 것도 없습니다.
벤치마킹 하다가 마음에 드는 느낌의 UX, UI를 발견해서
그 느낌 비슷하게 만들어보기로 합니다.
그나마 쉽게 가려고 Figma Community로 가서 Template 뒤져봅니다.
쩝.... 아무리 뒤져봐도 마음에 드는 것이 없고, Free에서는 가져다 쓸 만한
것이 없는 듯합니다.
결국 한숨 한 번 쉬고,
from scratch로 시작합니다.
Figma를 펼치니
걍 백지입니다.
하.... 막막합니다.
하얀 건 도화지....그런데 까만 글자 조차도 없습니다.
에라 모르겠다. 그냥 입 닫고 냅다 만듭니다.
허접한 결과물 나오는 것 밖에 더하겠어? 라는 생각으로...
화면 크기 조정은 또 어떻게 하는지도 몰라서 한참을 헤매면서 이것저것
눌러보면서 이거 아닌가? 저건 뭐지?
방황을 거듭합니다.
그래도 꾸역꾸역 한 개씩 건드려 보면서
인터페이스와 요소, 기능들을 몸으로 체화해 갑니다.
요소와 그룹 이런 것들은 알겠는데
Frame은 또 뭔지 모르겠습니다.
몰라도 일단 꾸겨 넣습니다.
Figma asset 도 뒤져서 아이콘들도 찾아서 넣고
Formatting도 하면서 나름 이쁘게 만든다고
힘을 써 봅니다.
그런다고 이쁜 것 같지는 않네요....힝.....
그래도 나름 의미와 내용을 집어 넣는다고
ChatGPT의 도움을 받아서
세계관과 naming도 하면서 고민하면서 만듭니다.
🌌 Constella
“지식은 흩어진 별이 아니라, 연결되어야 별자리가 된다.”
🌌 세계관:
각 문서, 기록, 대화는 별처럼 흩어져 있지만, 의미 있게 연결될 때 비로소 이해와 통찰의 별자리가 된다. 이 연결을 만들어주는 존재가 당신의 AI Agent, Constella다.
🧩 구성 요소:
기능
이름
설명
파일 업로드
Star Seed
별이 되는 씨앗, 당신의 정보
지식 저장소
Constellation
서로 연결되어 의미를 만드는 정보의 별자리
검색/질문
Navigator
별자리를 해석하는 자, 질문을 통해 길을 찾는 자
대화형 Agent
Orion
가장 밝게 빛나는 응답자. 오리온 별자리처럼 중심에 있음
🔮 핵심 메시지:
“Connect the stars. Illuminate the answer.”
지식의 별을 연결하면, 답이 빛난다.
회사 이름도 정했고, 로고도 만들어봤습니다.
Nebulai
조합: Nebula(성운) + AI
의미: “지식의 안개 속에서 새로운 별이 태어나는 곳”
느낌: 부드럽고 시각적으로도 신비로운 이미지, 창의와 AI의 융합
활용: 정형/비정형 데이터를 AI가 성운처럼 흡수하고 별(응답)로 태어나게 함
슬로건 예시: From chaos to clarity — born in Nebulai.
반영하면서 벤치마킹하면서 생각한 UX/UI를 실제로 구현해 봅니다.
간신히 2페이지를 만들었습니다.
그룹핑도 하고 Frame도 만들었습니다.
근데 아주 깔끔하고 멋지게 그룹핑을 하고 Frame을 만든 것은 아니고
어떻게든 되는 대로 얼추 만들었습니다.
Figma 작업 처음 하는 사람으로서는
처음부터 깔끔하게 모든 것을 그룹핑 하고 Frame 만들면서 하기는 어렵고
일단은 그림 그리듯이 각각을 만들고
그 후에 서로 간에 엮어보려고 노력해봅니다.
결과물
연결을 하려고 각각의 페이지를 Frame으로 설정했는데
화살표 연결을 어떻게 하는 건지 도통 모르겠습니다.
Perplexity에 물어봐도 잘 모르겠네요.
결국은 화살표로 연결해서 Flow가 있다는 것을 보여주는 것은 실패합니다.
(못 찾겠다. 꾀꼬리... Flow 연결 어떻게 하는 거니?)
그래도 2페이지 만들었으니 Preview도 해 보고, Present도 해 봅니다.
허접해도 해 볼 건 다 해봐야겠죠? ㅎㅎ
근데 왜 이건 이렇게 어둡게 나오죠?
모르겠는 것 투성이입니다.
결과물 링크
https://www.figma.com/proto/GD2hqdUbVVUPJguuIlm6wv/Figma-baby?node-id=0-1&t=5l6smxXkIG9Rvjbo-1
👶 Figma baby의 응애응애 수준에서 걸어 다니는 것이 목표였는데
이번에는 기어가는 수준에서 끝이 납니다.
🧒 Figma 어린이가 되기도 힘드네요...쩝.....