스큐어모피즘부터 글래스모피즘까지, 사용성을 고려한 디자인은?

요즘 부트캠프에서 UI 강의를 듣고 있다. 지난 주 실습 중 하나는 AI를 활용해서 앱 화면을 구현해보는 거였고, 나는 평소에 관심있던 '스마트홈'을 주제로 피그마 메이크를 활용해 UI 화면을 만들어봤었다. 왼쪽이 피그마 메이크에서 뽑은 초안이고, 이걸 토대로 오른쪽으로 디벨롭해봤다. 오른쪽 UI 화면도 완성본은 아니긴 한데.. 자꾸만 이게 맞나? 하는 의심이 들었다. 사용자 경험 같은 건 무시하고 일단 구현해놓은 듯한 느낌이 들어서다. 물론 이 화면을 기획하기 전에 데스크리서치조차 하지 않았고, 실습 내용도 그저 AI를 활용하는 게 목적이었지만 말이다. 그래도 이왕 만들 거 좀 현실에 있을 법하고, 실제로 구현했을 때 사람들한테 도움이 되는 디자인이면 좋겠다 싶어서 디벨롭해보기로 했다. 디벨롭하기에 앞..

[UXUI] 부트캠프 UX 팀프로젝트 회고

첫 UX 프로젝트가 끝났다. 엄밀히 말하면 아예 끝난 건 아니고 UT 결과와 피드백을 토대로 수정해야 하지만... 그래도 일단은 1차 MVP를 뽑았다는 데에 의의를 두기로 한다. 프로젝트를 하면서도 틈틈히 회고를 쓰고 싶었으나 팀원 개개인을 통해 배운 일들이 많았어서 공개된 블로그에 언급하기가 조금 망설여졌다. 그래서 노션에만 회고록을 적었고, 그마저도 프로젝트 마지막 1주일은 바빠서 적지 못했다. 2026년은 기록을 많이 하는 한 해로 보내고 싶었는데 신년부터 그러지 못한 것 같아 아쉽지만, 그만큼 프로젝트에 열심히 참여했다는 의미이기도 하니까 지금부터라도 다시 잘해보려고 한다. 배운 점 1. 가설 세우기가설은 팀원들이 같은 방향을 바라보게 하는 가이드 역할을 한다. 서비스의 방향을 어디로 향할 것..

[데벨챌, UXUI] '데이터 삽질 끝에 UX가 보였다' 3주차 - 감각이 아니라 근거로 말하는 디자이너

데벨첼 세미나 후기는 여기 ▼ [seminar] 데이터 드리븐 디자인 세미나 : UXUI 디자이너에게도 비즈니스 관점이 필요해 !지난 화요일(11/4) 데이터 드리븐 디자인 세미나를 들었다. 데이터 분석 강의를 만드는 '데이터리안&#...blog.naver.com 📚 챌린지 일정 및 기록 방식 드디어 마지막 3주차 미션! 데밸챌을 신청한 덕분에 책을 다 읽을 수 있었다. 📚 인상 깊었던 구절과 생각이번 주차에는 책을 읽으면서 노션에 정리해둔 내용을 제미나이한테 요약해달라고 부탁했다. UX 기획자의 입장에서 당장 프로젝트에 사용할 수 있을 정도로 요약해달라고 했더니 '적용 방안 요약'을 함께 덧붙여주었다. 마지막 주차의 챌린지 범위인 Part3-4를 읽으면서 부트캠프 강의때 들은 내용들이 머리를 스쳐..

[UXUI] 부트캠프 29일차 - 과업을 해결하기 위해 제품을 고용한다

Learn사실 물건을 사고싶은 게 아니라 문제를 해결하고 싶었던 거야"고객은 각자의 과업(Job)을 가지고 있는데 과업은 단순히 고객이 기존에 하던 일이라기 보다, 고객이 완수하길 위해 노력하는 일이다." by Theodore Levitt 요즘 이케아 리디자인 프로젝트를 갈아엎을 생각을 하고 있다. 어제 자기 전에 퍼플렉시티랑 이것저것 대화를 나눈 영향으로 오늘 아침에 갑자기 불현듯 떠오른 생각이 있었다. 사실 사용자는 제품을 사고싶은 게 아니라, 그저 일상의 문제를 해결하고 싶었던 게 아닐까? 소파 커버를 구매하고자 하는 최초의 욕구가 발생하는 순간은 '우리집 거실과 잘 어울리는 색상의 커버를 갖고싶다!' 고 생각한 순간이 아니라, '소파 커버가 다 헤졌네' 라고 인지하는 순간이라는 말이다. 프로젝트..

[UXUI] 부트캠프 27일차 - 사람과 사회, 사용자 관점에서 바라보는 UX

Like◆ 좋았던 점- UX를 독학할 수 있는 공부법을 많이 알려주셨다새로운 선생님께서 수업해주신 첫 시간! 드디어 UX 파트에 입성해서 기대감 만땅이었다. 이론 수업은 캠프 초반에 들었던 기초 파트와 겹치는 부분이 꽤 있었는데, 중반 부분에서는 혼자서도 UX를 공부할 수 있는 방법을 알려주셔서 좋았다. 비전공자 출신이라고 하셨는데 그래서 더 독학하는 방법에 대해 많이 알고 계셨는지도 모르겠다. 공부법을 알려주신 부분에서 특별했던 점은 UX를 바라보는 관점에 따라 공부법도 상이하게 알려주신 점이다. '사람 전체' 관점과 '사회' 관점으로 나누어 알려주셨다. 여기서 '사람 전체'는 사람이라면 응당 이렇게 행동한다~ 는 관점으로 바라보는 것이고, '사회' 는 지금 시점에서 출시되어 있는 서비스는 어떠한지~ ..

앱인토스 미니앱 배포하기: 스프레드시트로 관리하는 QA, 샌드박스 앱으로 테스트하기

이제 디자인 단계는 얼추 끝나서 테스트를 진행 중이다. 테스트 프로세스1. 스프레드 시트에 오류 및 수정사항 기록2. 수정사항 반영3. 앱인토스 샌드박스 앱 다운하고 로컬서버 연동4. 폰으로 앱 확인하며 수정사항 계속 캐치 스프레드시트는 아래와 같이 정리했다. 크게 피드백 넘버 | 페이지명 | 반영여부 | 수정사항 | 코멘트 로 구성했다.- 페이지명은 큰 카테고리 / 페이지명 으로 기재한다.- 반영여부는 반영됨 | 반영안됨 | 논의필요 로 구성하고, 반영과 논의여부에 따라 상태를 변경한다.- 수정사항에는 말그대로 고쳐야할 부분, 코멘트에는 수정사항에 대해 덧붙일 말들을 써둔다.- 피드백 중 이미지 참고가 필요하다면, 두번째 시트에 이미지를 첨부한 뒤, 해당 셀의 링크를 페이지명에 걸어둔다. 원래는 피그마..

앱인토스 미니앱 배포하기: 프롬프트, 어디까지 자세하게 적어야하는 거예요?

여태까지의 작업 진행 상황... 서비스의 모든 페이지를 디자인하고, 기능명세를 작성했다. 작성한 기능 명세를 클로드에 입력해서 구현하게 만들었고, 현재 디자인은 모두 구현된 상태다. 기능의 경우, 단편적으로는 구현되지만 총제적으로는 아직 구현되지 않는 상태다. 예를 들면, '후기 작성하기' 같은 기능이 있다고 했을 때 버튼을 클릭해서 텍스트 입력까지는 가능하나 입력한 후기가 저장되지는 않는 상태인 것이다. 작업을 수행할 때 이전과 달라진 점은 프롬프트를 입력하는 방식이다. 이전에는 내 회사 동료같은 AI에게 '-해주세요' 라며 존대를 썼으나, 그게 토큰을 낭비하는 행위라는 걸 알게 된 후에는 최대한 프롬프트를 간략하게 작성하려고 노력한다. 'OO요청' 이런식으로 말이다. 그리고 비슷한 작업은 한꺼번에 요..

앱인토스 미니앱 배포하기: 디발자가 되는 길은 멀고도 험하다...

멋쟁이 사자처럼 UXUI 디자인 부트캠프가 지난 수요일로 끝이 났다. 생애 최초로 겨울이 짧게 느껴졌던 이유는, 반은 지구온난화고 반은 프로젝트에 열중해서였을 것이다. 찍먹하길 좋아하는 내가 무언가에 몰입한다는 게 드문 일인데 그걸 가능하게 해준 동료들과 강사님들, 그리고 매니저님들께 감사하다. 그리고 과감히 이 길을 선택해준 과거의 나에게도 감사하다. 부트캠프가 끝났다는 건 그동안 열심히 갈고닦은 포트폴리오와 초보 디자이너로서의 역량을 구직시장에 펼쳐야할 시간이 왔음을 알렸다. 그와 동시에 매일 아침 9시마다 작업을 함께해줄 동료가 없어졌다는 의미기도 했다. 두 번의 프로젝트에 열심히 참여했지만 어딘가 부족해보이는 내 포트폴리오를 보충할 겸, 그동안 배웠던 것들을 까먹지 않기 위해서 사이드프로젝트를 시..

바이브코딩으로 타로운세 서비스 만들기

부트캠프 UI 실습 때 만든 타로운세 서비스 'Stella Tarot' 이다. 선생님이 '별' 에 무슨 의미가 있는건지 물어보셨는데, 타로하면 뭔가 점성술이 떠올라서 넣어봤다. 웹사이트 한정 별들 위에 마우스를 호버링하면 깜박거리는 인터렉션을 체험할 수 있다. 글꼴은 엘레강스하면서도 오묘한 느낌이 나는 궁서체로 찾고 싶었다. 그러다가 찾은 건 '국립박물관문화재단'의 전용 서체였다. 다운 받을 수 있는 사이트는 아래에▼ 국립박물관문화재단 www.nmf.or.kr 메인페이지의 중앙 부분에는 'marquee'라는 인터렉션을 적용한 붉은 문구들이 우측에서 좌측으로 흘러가고 있다. '운명'과 관련된 명언들을 검색해 넣은 것인데, 타로 결과가 마음에 들지 않더라도 운명은 어차피 본인이 개척하는 것이니 너무 상심치 ..

찐 서랍장 모양의 블로그 제작기 (feat. Antigravity, Stitch) - 파트1, 디자인

오백년 만에 블로그 디자인을 바꿨다. 이번에 리뉴얼하면서 제일 도움을 많이 받은 건 단연 '안티그래비티(Antigravity)' 였다. 링토스 게임 만들고 나서 바이브코딩에 재미가 들려서 블로그까지 바꿔버린 건데. 이거 하려고 Google AI Pro 결제했다. 링토스 게임 만들었던 후기는 여기에 ▼ 안티그래비티로 수중 링 던지기(링 토스) 게임 만들기어제 부트캠프 휴강일이어서 뭘 하면 시간을 알차게 보냈다고 소문이 날까.. 싶어서 게임을 만들어보기로 했다. 이유는 모르겠지만 얼마 전부터 어렸을 때 했던 게임인 '수중 링 던지기 게임(ringdrawerrer.tistory.com 내 블로그 이름은 '서랍장' 이다. 그래서 직관적으로 서랍장 모양의 블로그를 만들어보았다. 이 발상을 처음 한 건 1년 전..

안티그래비티로 수중 링 던지기(링 토스) 게임 만들기

어제 부트캠프 휴강일이어서 뭘 하면 시간을 알차게 보냈다고 소문이 날까.. 싶어서 게임을 만들어보기로 했다. 이유는 모르겠지만 얼마 전부터 어렸을 때 했던 게임인 '수중 링 던지기 게임(ring toss)'이 생각나서 이걸 만들어봐야겠다 싶었다. 놀랍게도 위 이미지가 여태까지의 최종본이고요.. 모션이나 요소에 현실감을 주려고 해봤는데 잘 안 된다. Gemini-Pro3 를 사용해서 저기까지 구현해뒀는데, 'quota limit' 에 걸려서 27일까지 안티그래비티를 사용할 수 없게 되었다.. 이런. 아쉬운대로 제미나이 무료버전을 사용해서 디벨롭해보려고 했는데, 내 프롬프트가 이상해서인지 자꾸 내 게임을 망쳐가길래.. 그냥 됐다 하고 여태까지 어떻게 프롬프트를 입력하고 디벨롭해왔는지 과정을 기록해보려 한다...