[OpenAI API] 401 Error - Incorrect API key provided
·
Develop
Backgroundnext.js에서 chatGPT를 활용한 기능을 테스트하다가, 배포를 위해 github public repository에 올리고 github action으로 배포를 했다...근데 github에 push 하기 전엔 잘 돌아가던 키가.. push 하고 나서는 계속 401 error가 떠서 ㅠㅠ 하루종일 이유를 몰라서 미쳐버리는 줄... OpenAI api key를 환경변수로 넣고 gitignore까지 했는데... 왜 안 되지... 고민고민 했었다... 원인그냥 public repository에 올리면 안되는 듯싶었다. 원래 메일함 잘 안 보는데... 우연히 메일을 보니... OpenAI : 너 API Key 누출됐어!!!!!!! 새로 키 받고, 환경 변수에 바꾸고, 다시 테스트하고, 깃에 ..
[Framer X Code] Input값 바로 화면에 출력하기(createStore)
·
Framer
들어가기 앞서… React 경험자들에게: React를 써보신 분들은 알겠지만, React에서는 그냥 변수를 화면에 띄웠을 때 그 변수의 값이 바뀌어도 재렌더링이 안되기 때문에 useState를 씁니다. Framer에서도 마찬가지로 var로 선언된 변수는 화면에 바로바로 반영되지 않기 때문에, createStore를 써야 합니다. React 비경험자에게: React는 딱 1개의 페이지가 렌더링 되어 브라우저에서 보이게 됩니다. 그리고 필요할 때마다 재렌더링됩니다. 만약 특정 값이 변화하고 이를 화면에도 보여줘야 하는 상황일 때, React에서는 useState라는 훅을 사용합니다. 왜냐하면 var로 선언된 변수는 값이 변경되어도 다시 렌더링 되지 않기 때문이에요. var로 선언된 것과 같이 변수지만, 이 ..
chatGPT한테 물어보자! - UT 결과 편
·
UX
Background: UT 결과 보고서를 어떻게 쓸지 막막해요... 구글링을 많이 하지는 않았지만, 제 맘에 쏙 드는 폼은 없었습니다. 그래서 꼭 들어가야 하는 필수적인 내용들을 포함시킨 뒤, 제 멋대로 디벨롭하기 위해서 저번에 도움을 받았던 chat GPT에게 물어봤습니다. 회사에서 UT를 진행하고 막상 보고서를 쓰자니, 막막해서 chatGPT의 도움을 받았습니다. (영어 잘 쓴 건지 모름..) 그래서 chatGPT가 전수해준 UT 결과 정리 노하우를 공유 / 번역해 드리겠습니다. Introduction: This section should provide background information on the purpose of the usability test, the user population, a..
chatGPT한테 물어보자! - UT 설문지 편
·
UX
회사에서 UT를 해보고 싶은데... 구글링을 아무리 해봐도 뭘 수집해야 하고, 뭘 물어봐야 할지 감이 안 잡혀서 최후의 보루로 chatGPT에게 물어봤습니다. (사진은.. 그때 스크린샷 안 찍어서 다시 물어봄) chatGPT의 응답과 번역을 정리했습니다. Usability Test Sheet Introduction(소개): Brief overview of the product or system being tested 테스트 중인 제품 또는 시스템에 대한 간략한 개요 Objectives of the usability test 사용성 테스트의 목표 Participants' demographics (e.g. age, gender, occupation, etc.) 참가자의 인구 통계 (예: 연령, 성별, 직업 ..
UX가 막연한 분들에게
·
UX
학생 시절, UX를 공부하다 보면 이걸 왜 하지?라는 물음을 항상 가졌었습니다. 제가 아끼는 동아리 후배들도 비슷한 물음을 가지고 있는 것 같더라구요 ㅎㅎ 제 생각으로는... UX 공부를 갓 시작한 분들은 비슷한 물음을 가지고 계시지 않을까 생각합니다!! (아닌가...) 저는 학생이었을 때(불과 1년 전) 회사에서의 (현실적인) UX 프로세스가 궁금했습니다. 왜냐면 이론은 "이상적이다"고 생각했거든요. 그 무엇보다 "사용자"가 우선시되는 것도 그렇고, 각 과정들의 아웃풋이 어떤 의미를 가지는지가 좀 안 와닿았거든요 ㅎㅎ 이에 (제가 생각하는) UX 프로세스의 현실적인 의미를 한번 정리해보려고 합니다. (UX + 린 / 애자일) 제 의견일 뿐이기 때문에, 댓글로 의견을 마음껏 달아주시면 감사하겠습니다 ㅎㅎ..
[경험 디자인] 서비스를 사용하게 만드는 보이지 않는 손 - 내적인 긴장(경험의 3차원 모형)
·
UX
Q. 사용자들이 우리 서비스를 사용하는 이유가 무엇일까요? 목적을 달성하기 위해, 편리해서, 재미있어서 등... 다양한 이유가 있을 겁니다. UX의 시작은 사용자의 "Needs"을 찾는 것으로 시작하는 것 같습니다. 사용자의 니즈를 찾고, 가려운 부분을 긁어주면 사용자는 자연스레 모이지 않겠어요? (물론 그게 너무 어렵습니다 ㅎㅎ) 결국 UX는 문제(사용자의 Needs, Pain Point)를 찾고, 솔루션을 제공하는 것입니다. 수많은 UX 리서치 방법론들은 문제를 찾기 위해 사용자에 집중합니다. 사용자의 행동을 분석해보기도 하고, 사용자에게 직접 물어보기도 하죠. 저는 그중, 사용자의 경험점(As-Is)이 어딘지, 어떤 방향으로 경험점을 이동해야 할지 분석해보는 "경험의 3차원 모형"을 정리해보려 합니..
[Framer X Code] Override로 Hover & Click Effect 만들기
·
Framer
Override 생성하는 방법을 모르신다면... Code Override 만들기 게시글을 먼저 보고 와주세요. Code Override 만들기 : https://minny-it.tistory.com/4 [Framer X Code] Code Override 만들기 *리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/deve minny-it.tistory.com 0. 코드 Override 생성하기 우선 Override 파일을 만들어줍니다. 저는 Effects라고 이름을 지었습니다. 1. Override 코드 작성하기 저는 Override 함..
[Framer X Code] Code Override 만들기
·
Framer
*리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/developers/guides/overrides/ 를 번역하고 조금 더 자세하게 써놨습니다. (예제 빼고 ㅎ) 코드 Override 생성, 기본 Override 구조, 데이터 공유, 참고사항(about Override, Data from "framer")에 대한 이야기입니다. 0. 코드 Override 생성하기 코드 Override를 생성하기 위해서는... 좌측 사이드바에서 Assets을 선택한다. 하단에 Code의 + 버튼을 누른다. New override를 선택한다. 코드 파일의 ..