야생가오리

본 글은 GPT 4o 모델과 프롬프트 엔지니어링을 활용한 AI 도슨트 애플리케이션 제작 프로젝트에서, 애플리케이션의 채팅 기능에서 클라이언트 / 서버 단에서 기술적인 부분이 어떻게 구현되었는지 설명한다.작성자는 팀에서 프론트엔드(클라이언트)를 맡았기에, 백엔드보다는 프론트엔드 코드와 UI, 사용성 위주로 작성하였다.또한 코드는 핵심 함수 위주로 첨부하며 UI 등 자잘한 부분은 많이 생략하였다. 1. 프롬프트 설계AI 도슨트 프롬프트를 설계하고 Streamlit으로 테스트 앱을 제작하는 과정을 설명한, 이전 블로그 글이 있기에 링크를 첨부한다.최종 프롬프트는 아래 글의 프롬프트에서 예시를 수정하고 영어로 번역하는 등 추가적인 수정이 이루어졌다.https://day4fternoon.tistory.com/85..

PART 5. 컴포넌트 & 배리언츠 적용하기01 컴포넌트로 동일한 형태를 반복해서 사용하기컴포넌트 : 디자인 전체에서 재사용할 수 있는 요소. 작은 요소인 버튼이나 아이콘부터 레이아웃 전체에 이르기까지 다양한 범위에서 사용 가능 반복해서 사용되는 요소는 컴포넌트로 만들어 관리하면 효율적이고, 모든 요소를 한번에 편집할 수 있어 유지보수가 쉬움 1) 메인 컴포넌트와 인스턴스 컴포넌트 생성하기메인 컴포넌트: 가장 먼저 생성한 컴포넌트. 인스턴스 컴포넌트의 기본 속성을 정의하는 역할을 하며, 디자인에 직접 사용하지 않고 별도 페이지에서 관리하는 것이 일반적임 인스턴스 컴포넌트: 메인 컴포넌트의 복제본. 디자인에 직접 사용되며, 메인 컴포넌트와 속성이 동기화되어 있음 2) 인스턴스 컴포넌트의 속성 변경하기 3)..

- 주제를 확실히 잡는 게 좋을 듯함.. AI도슨트의 효과 - 아님 아예 초등학생을 위한 챗봇- 근데 생각해보니... 주체적 미술감상이라면 꼭 "초등학생" 에 초점을 두어야 할까?꼭..... 초등학생이어야 할 필요가 있나...?   1. 아동의 지속 참여 의도 증진을 위한 보상 전략 제안에 대한 탐색적 연구 : 일상생활습관 형성을 위한 챗봇 ‘뽀미’를 대상으로 강화이론 / 챗봇 / ADHD / 초등학생ADHD아동 대상, 보상이 아동의 참여를 증진시킨다는 가설 연구유의미한 결과는 없었음https://www.dbpia.co.kr/journal/articleDetail?nodeId=NODE10530350 DBpia논문, 학술저널 검색 플랫폼 서비스www.dbpia.co.kr 2. 인공지능 미술 작품이라는 사..

PART 4. 피그마의 꽃, 오토 레이아웃 살펴보기01 오토 레이아웃 구성요소 알아보기1) 오토 레이아웃 생성- 오브젝트 선택한 상태에서 shift + a ctrl + d로 복제하면 프레임도 같이 따라 늘어남새 오브젝트를 끼워넣거나 기존 오브젝트를 빼는 것도 가능방향키로 오브젝트끼리의 순서 변경도 가능 2) 방향에 따라 오브젝트 배열하기수직 / 수평 / Wrap으로 정렬 가능wrap은 수평방향만 적용됨. 상위 컨테이너 크기에 따라 내부 오브젝트 자동 줄바꿈 3) 간격 설정하기오브젝트 간 간격 조절 가능하나의 프레임 안에 있는 모든 오브젝트는 같은 간격을 가짐wrap에서는 가로/세로 간격 따로 설정 가능 4) 패딩 - 오브젝트와 프레임 사이 크기 조절하기상하좌우 방향 설정 가능. Ctrl을 누르고 패딩을 ..

네이버 밴드 API로 뭔가 해보고 싶은 게 생겨서, 일단 가장 먼저 사용자인증부터 구현해보기로 했다.네이버밴드 API 공식 문서 >> https://developers.band.us/develop/guide/api 밴드 개발자 센터열린 공간, 함께하는 기술, 경험의 공유. BAND 플랫폼이 애플리케이션 개발에 필요한 다양한 환경을 제공합니다.developers.band.us 1. 서비스 등록우선 API 사용을 위해 내 앱을 등록해줘야 한다.서비스 이름, 유형을 작성하고 리다이렉트 uri를 적어준다.Redirect URI란, 로그인 요청을 보내 인증을 받으면 인증토큰이 오게 되는데, 그때 리다이렉트될 페이지 주소를 의미한다. 나는 현재 로컬 개발환경에서 테스트 중이고, vite를 사용한 리액트 프로젝트를 ..

https://www.acmicpc.net/problem/1629  큰 수의 곱셈 문제가 있을 때 떠올리면 좋은 건 분할정복과 비트마스킹이다.a를 b번 곱할 때 반복문으로 b번 곱하는 것이 아니라, 지수를 반으로 나눠서 거듭제곱하는 방식이다. 물론 이때 지수가 짝수이면 그냥 반 갈라도 되지만 지수가 홀수이면 1을 하나 빼서 나눈 뒤 마지막에 한번 더 곱해줘야 한다.처음에는 그냥 비트마스킹만 생각했는데 그럼 2의 거듭제곱만으로 계산해야 하니 귀찮았다.. 단 숫자가 아주 커질 수 있기 때문에 그냥 계산하면 오류가 날 수 있으므로 계산 과정에서 매번 c로 나눈 나머지를 사용하도록 해서 오버플로가 나지 않게 해준다. b & 1 이라는건 비트마스킹에서 첫번째 비트가 1인 수와 and를 했을 때 true 즉 0이 ..

교재 https://product.kyobobook.co.kr/detail/S000211177351?utm_source=google&utm_medium=cpc&utm_campaign=googleSearch&gad_source=1&gclid=Cj0KCQjwgrO4BhC2ARIsAKQ7zUlZb_9iXcHK2XBm2xmWADWQJwpqZC7W7WMheSwUpzZelq7RUtq4XWQaAuFVEALw_wcB 실전 피그마 | 김범용 - 교보문고실전 피그마 | 실무 프로젝트를 따라 직접 만들며 배우는, 스무(SMU)의 실전 피그마UX/UI 디자인 툴 1위 피그마는 UI/UX 디자이너, 서비스 기획자를 위한 협업에 특화되었다. 현업 디자이너로 활동하product.kyobobook.co.kr PART 1. 원포인트 ..

2주차 과제가상 설문조사 작성하기https://docs.google.com/forms/d/e/1FAIpQLSdl5b17mIROEgBKS9Ynw5FackTAGj69KM6JEet74jG3mvyaCw/viewform?usp=sf_link 사용 설문" data-og-description="부모님, 큐레이터 등 다른 사람의 설명을 들으며 감상하는 것" data-og-host="docs.google.com" data-og-source-url="https://docs.google.com/forms/d/e/1FAIpQLSdl5b17mIROEgBKS9Ynw5FackTAGj69KM6JEet74jG3mvyaCw/viewform?usp=sf_link" data-og-url="https://docs.google.com/form..

플젝이 뭔데...컴퓨터공학과 학생으로 살면서 가장 많이 하고 또 중요한 것은 '프로젝트'인 것 같습니다. 협업 면에서도, 기술 면에서도, 아이디어 구체화 면에서도 정말 많은 것을 배울 수 있는 활동으로, 컴공의 꽃이라고도 할 수 있겠습니다. 저는 대충 종합예술 비슷한 거라고 생각해요. 그러나 취업이니 뭐니 하며 졸업학년에 가까워질수록 '프로젝트 경험'은 일개 학부생에게 상당한 부담으로 다가오기도 합니다.취업하려면 플젝경험이 많아야 한대. 심지어 퀄리티도 있어야 한대. 근데 다들 기술은 어디서 배워오는 거야? 프로젝트 같이 할 사람들은 또 어디서 구해오는 거야? 아니 남들은 벌써 이렇게 멋진 프로젝트를 해서 배포까지 했다고? 남들 깃허브에는 막 플젝 리포지토리가 우르르 올라오는데 난 텅텅 비었어. 다들 뭘..

졸프 개발에 바쁜 요즘...이번에 구현할 기능은 기능이다.달리2 모델을 돌리는 건 백엔드가 해줄 거고, 프론트에서 할 일은 사용자가 원본 사진에서 특정 영역을 선택하면 그 부분만 투명하게 만든 png 파일을 갖다주는 것이다. 1. 이미지에서 특정 영역 선택하기이미지를 띄울 컨테이너를 만들고, 이미지와 버튼을 만들어준다.이미지 위를 드래그하면 사각형으로 선택 영역을 표시해줘야 한다. 이미지 위에 사각형이 올라가는 구조이므로 Stack을 사용하고, 드래그 제스처를 구현해야 하므로 onPan과 관련된 메서드들을 사용해준다. 변수들은 Stateful 위젯 안에 이런 타입으로 선언해줬다. onPanStart로 드래그를 시작했을 때 사각형의 시작점이 될 오프셋을 지정해주고, onPanUpdate로 마지막으로 터치..