Subscribe to New Posts

Lorem ultrices malesuada sapien amet pulvinar quis. Feugiat etiam ullamcorper pharetra vitae nibh enim vel.

Subscribe Zalgritte's Blog cover image
Zalgritte profile image

Zalgritte

프로덕트 디자이너로 근무했습니다. 현재는 프론트엔드 개발을 배우고 있습니다. 인터랙티브 웹을 좋아합니다.

15 Posts
Seoul
하롱반미, 합정 최고의 베트남 샌드위치 post image

딱 작년 이맘때쯤이었다.

베트남 호이안으로 여행을 가서 햇살과 함께 수영장에서 놀고 야시장을 거닐었던 날.

그때의 추억은 떠올리기만 해도 참 행복해지게 만든다.

그런데, 딱 하나 못해본 것이 '반미'를 먹는 것이었다.

호이안 야시장은 숙소에서 걸어가기엔 애매한 거리라 택시를 타고 가야했다.

그래서 저녁식사부터 밤까지 코스를 준비해서 가야했는데,

베트남 여행 카페에서, 구글맵스에서 수집한 반미 맛집을 갈 생각이었다.

너무 아쉽게도 도착하니 이미 라스트오더가 끝났고 가게 주인과 아쉬운 이별을 했었던 기억이 난다.

그렇게 일년이 지나고, 나는 소문으로만 듣던 반미 맛집, '하롱반미'를 드디어 만났다.

원래는 상수쪽에 있던 것 같은데 합정으로 이사를 했다고 한다.

가게는 넓지 않고 테이블도 많아야 4팀 앉을 수 있을 것 같았다.

그리고 친구의 추천에 따라 돼지고기 반미와 내가 좋아하는 닭껍질튀김을 시켰다.

첫 입을 먹은 순간 고수의 향이 진하게 올라온다

바삭하지만 쫀득한 빵과 양념이 잘 버무러진 고기의 맛이 순서대로 느껴진다.

이거... 별버거의 느낌이다..!
💡
별버거는 상수역 근처에 있던 홍대 최고의 수제버거집이었다.
정말 기본기가 탄탄하고 빵이 매우 맛있던 집이었다.
아쉽게도 가게를 닫았다.

매장의 크기도 그렇고 내용이 알찬, 이 느낌...

닭껍질튀김도 그냥 마트에서 파는 것이 아니었다. 생각보다 바삭바삭한 튀김옷 안의 식감은 쫄깃했다.

이 얇은 튀김에서 겉바속촉이 느껴진다.

*TMI : 본인은 태국 여행갔을 때, 로컬 시장에서 닭껍질튀김만 두봉지 사서 우적우적 먹고 돌아다녔을 정도로 닭껍질튀김을 좋아한다.

오랜만에 찾은 맛집이다.

오랜만에 5점을 줄만한 식당을 찾았다.

카카오맵 : 리뷰 9개, 별점 5점 (https://place.map.kakao.com/2057394997)

미친 별점이다. 카카오맵 별점은 짜기로 유명해서 3점만 되어도 동네에서 좀 치는 맛집인데, 5점 만점이다.

하롱반미 : 네이버
방문자리뷰 428 · 블로그리뷰 89

네이버지도 링크 : 자세한 정보는 여기서 확인하시길

나중에 또 먹으러 가야지

0:00
/0:03

Designing with AI : Figma와 Diagram을 통해 엿보는 디자인의 미래 post image
💡
이 글의 이미지는 Webp 포맷을 사용하고 있습니다.
지원하지 않는 브라우저와 디바이스 사용 시 유의바랍니다.
여는글

디자인 분야에서 AI는 어떻게 접목이 되어 어떤 미래가 펼쳐질까요?

이번에 개최된 Figma의 연례 컨퍼런스인 CONFIG에서, 미래의 모습을 잠깐이나마 엿볼 수 있었습니다.

Figma와 (인수한) Diagram이 그려주는 'AI로 디자인 하는 미래'

그중에서 가장 핵심적인 부분만 발췌하여 짧게 보여드리고자 합니다.

원본 Config 유튜브 - 생략된 좋은 내용이 많이 있으니 꼭 보시길 추천드립니다.


핵심 요약

디자인은 문제를 해결하는 것입니다.
그리고, 디자인은 기술과 함께 발전합니다.

이 2가지 가정을 기억하며 AI로 바뀌는 세상을 What we design, How we design, Who we designs 3가지 측면으로 봅시다.

다시 말해 Figma는 Product, Procss, People 3가지 항목으로 AI를 설명합니다.

What we design? (Product)

오늘날에는 앱 기반의, 모놀리식(monolithic) 구조를 가지고 있습니다.

하지만 미래에는 AI를 통해 딱딱한 구조를 벗어나서 Dynamic UI를 구성하고 '유저의 의도와 행동'에 집중할 수 있게 될 것입니다.

그래서 앱 기반이 아닌 Task 기반의 디자인을 할 것입니다.

How we design? (Process)

그럼 어떻게 디자인을 하게 될까요?

기존의 원자(Atomic) 시스템은 아주 작은 요소들을 모두 만들어가며 아주 정교하고 '완벽'한 작업을 위해 애썼습니다. (1px을 맞추기 위한 수많은 피땀눈물...)

이 과정을 AI를 통해 패턴으로 만들어, 유기적으로 구성할 수 있게 됩니다.

최소한의 요소만 만들면, 자동으로 각종 상태(Status)와 변수(Variables)들을 만들면서 디자인 시스템까지 한큐에 적용한다는 것 같습니다.

아주 지루한 작업들은 더이상 할 필요 없이 좀더 문제와 솔루션, 아이디어와 전략에 집중할 수 있게 되는 것이죠.

미친듯한 시간 단축을 이뤄낼 것 같습니다...

Figma에 변수(Variables)에 각종 옵션까지 먹는 것만 해도 얼마나 고마웠는데...
이렇게 된다면... 최고...! 🥳

Who designs? (People)

Figma는 본질적으로 Community-Centered-Company입니다.

AI를 통해 천장을 높여 디자이너는 한계를 벗어나 더 잘할 수 있게,
바닥은 낮추어 다른 직무의 사람들도 디자인에 참여할 수 있게 만들고자 합니다.

그래서 모두가 메이커가 되는 협업 공간이 될 것입니다.

경계를 허물고 협업과 공동의 목표에 집중합니다.
더욱더 활발한 아이디어와 참여를 이끌어내게 될 것입니다.

이렇게 Product, Process, People - 3가지 관점에서 AI를 바라봤습니다.

End-to-End Process

AI는 하나의 제품이 아닙니다. AI는 기술이고 플랫폼입니다.

그래서 AI는 디자인 작업의 모든 과정을 도와줄 수 있습니다.

브레인스토밍, 디자인, 개발까지 모든 과정입니다.

Brainstorm

아이디어를 쉽게 생성하고 비슷한 것끼리 묶어내고(클러스터링) 그리고 요약까지 AI를 통한 브레인스토밍이 가능해질 것 입니다.

FIGJAM에서 AI를 통한 브레인스토밍 과정

데모 영상을 보시면 Figjam에서 AI를 사용하는 모습이 나옵니다.

프롬프트를 입력하자, 여러 아이디어 포스트잇이 생성되고, 이것들을 여러 기준으로 쉽게 모아볼 수가 있네요.

그리고 한번에 요약까지 해주는 장면이 나옵니다.

Design

디자인 실무에서는 어떻게 AI가 도와줄까요?

아이디어를 기반으로 초안을 만들고, 여러 배리에이션을 만들어주면서, 유저 플로우를 완성할 수 있습니다.

앨범 섹션에 들어갈 디자인을 여러개 만들어 제시해줌.
프롬프트를 입력하자, 그에 맞는 플러그인을 자동으로 사용. / 버튼의 상태에 따른 변수들을 알아서 생성.

정말... 좋네요...

Build

디자이너가 개발자에게 디자인을 전달하는 과정이 상당히 쉬워질 것 같습니다.

이미 개발자 모드가 나와서 VS Code에서 Figma 파일들을 접근할 수가 있는데요.

이를 통해 코드를 자동 생성하고 수정하여 디자인과 코드를 일치시킬 수가 있습니다.

VS Code에서 디자인을 기반으로 코드를 자동 생성.
코드베이스에 비슷한 코드를 찾고 수정된 디자인을 원클릭으로 반영.

디자인이 결과물에 제대로 반영하기 위한 많은 과정들이 훨씬 수월해지겠네요.

이걸 보고, 역으로 코드를 수정해서 디자인에 반영할 수 없나 라는 생각이 드네요.

양방향이 되면 엄청날 것 같은데...

Collaborate

이 과정에서 Figma는 협업을 중요하게 여깁니다.

조직 내 수십 가지의 파일과 수백 명의 '메이커' 혹은 디자인 파트너들과의 소통

조직 내에서의 코멘트나 여러 활동에 대해 요약해주고 관리해주는 기능들도 AI를 통해 쉽게 가능할 것입니다.


Diagram

이 다음은 Figma가 인수한 Diagram에서 세션을 진행합니다.

Diagram은 Figma에서 사용할 수 있는 각종 AI 플러그인을 개발해온 회사입니다.

Diagram은 (1)Plugin API, (2)Design Systems, (3)LLM 3가지로 AI툴을 만들 수 있게 되었습니다.

Diagram Plugins

Diagram의 제품에는 자동화(Automation)와 Intelligence 툴로 나누어 볼 수 있습니다.

지금도 사용가능한 툴들이라 한번 둘러보시면 좋을 것 같네요.

그중 Magician은 레이어 이름을 알아서 만들어주고, 만들고 싶은 아이콘을 프롬프트 입력하면 생성해주거나 하는 플러그인입니다.

제가 조사한 바에 의하면 이런 GPT 기반 AI플러그인 중에서는 가장 최고인 것 같더군요.

실사용을 해본 것은 아니지만, 나머지 플러그인들이 너무 조잡합니다...

Genius chat

그리고 가장 기대하게 만드는 Genius Chat입니다.

대화형 인터페이스에서 원하는 디자인을 말하면 자동으로 생성해주는 것 같습니다.

이번 세션에서는 현재 어느정도 수준인지만 보여주고 있습니다.

리스트를 자동으로 그려주거나 내용을 채워주기
기존의 디자인에서 검색창을 넣을 위치를 추천해주고 의견을 제시함

적어도 기존에 만들어둔 디자인을 기반으로 수정한다는 점만으로도 고무적입니다.

지금까지는 Gen-AI를 활용한 디자인은 편집이 불가능하게 만들어주거나 (jpg...) 전혀 관련이 없는 디자인 요소만 뽑을 수 있어 아무짝에 쓸모가 없었기 때문입니다.

그래서 이제 막 시작하는 Diagram과 Figma의 관계가 기대가 되네요.

마지막은 세션 내내 관통하고 있는 문구, "Still, We design"으로 막을 내립니다.

(아마도 AI가 디자이너를 대체하는 것 아니냐 식의 생각들을 의식한 것 같아요.)


닫는글

이렇게 Figma와 Diagram을 통해 디자인의 미래를 잠시나마 엿볼 수 있었습니다.

저도 디자이너로써 정말 기대가 되는 점들이 많네요.

읽어주셔서 감사합니다!

😊
더 다양한 이야기를 나누고 싶다면 AI & Designers (GPTers) 카톡방으로 와주세요!

0:00
/0:12