본문 바로가기
UX 디자이너의 AI 인사이트 시니어할루시네이션 인지 여부생성형 AI가 주는 답변의 근거에 대한 검증 절차가 필요하다.리서치 결과물을 보고서에 작성하려면 명확한 출처 명시가 필수이기 때문믿을 수 있는 출처인지, 정확하게 반영됐는지 등 확인해야 하는 사항이 많이 남아 있다.AI를 완전히 신뢰하기는 어렵다. 주니어근거 자료에 대한 필요성보다 빅데이터 기반의 답변이므로 신뢰할 수 있다고 이야기함AI 답변을 있는 그대로 작업에 적용하려함할루시네이션에 대한 별도 검증 과정은 이뤄지지 않음  AI가 주는 답변의 근거에 대해 생각해 본 적은 없는것 같다.생성형AI를 업무에 사용하는 직장인들이 많은데이런 인사이트는 디자이너뿐만 아니라 생성형AI를 사용하는 모두가 한번쯤 고민해볼 만한 내용인것 같다. 시니어와 주니어 디자이너가 AI를 활용하는 인식의.. 2024. 9. 26.
정보 접근성 23.10.31, 삼성 강남에서 진행되는 강연을 듣고 왔습니다. 퍼블리셔로 재직하며 정보 접근성 정말 많이 들어봤지만 제대로 반영하여 마크업해본 경험이 있나? 생각해 보면 부끄럽지만 없습니다. 그래서 도대체 접근성이 무엇이고 왜 중요한지에 대해 알고자 강연을 듣게 되었습니다. 접근성을 고려한 서비스 제작? 이미지 alt, titl 속성을 추가, 대체 텍스트 추가 정도 해놓고 우리 접근성 맞췄음~ 이런식의 작업 이었죠. 접근성을 인터넷에 검색해 보면 보통 이렇게 나오곤 하죠. "모든 사람들이 웹 페이지의 정보에 동일하게 접근할 수 있어야 한다." 이 문장을 보고 접근성에 대해 바로 이해할 수 있을까요? 저는 없다고 생각합니다. 접근성의 유형에는 많은 것들이 있겠지만 정보 접근성이 무엇이고, 왜 중요한지에 .. 2023. 11. 1.
Figma Figma 온라인에서 사용할 수 있는 디자인툴 UX/UI 디자인과 프로토타입 제작을 위한 기능 제공 📌장점 다른 디자인 툴과 비교하여 협업 기능이 강화되어 있다. 디자이너, 마케터, 개발자 간에 원활한 소통 가능 📌주요 기능 ▶ 개발자 Hand-off Hand-off: 디자인 단계에서 개발 단계로 전달하는 과정 디자인, 이미지 파일, 폰트, 간격, 사용자 인터랙션 등 ✅모든 것을 피그마 하나로 전달할 수 있음 ⇒ 디자인 외의 추가 정보를 전달하거나 수집할 필요가 없음 ⇒ 소통 시간 단축 ▶ 실시간 공동 편집 멀티 플랫폼을 지원 멀티(크로스) 플랫폼: 여러 종류의 컴퓨터 플랫폼에서 동작할 수 있음을 뜻함 ✅동시에 여러 사용자가 협업하여 디자인 작업 가능 ✅실시간 채팅, 피드백 가능 ▶ 디자인 시스템 구축 .. 2023. 10. 16.
UI/UX 도대체 이게 뭔데 UI/UX가 무엇이고 차이점은 무엇일까? UI (User Interface) User - 사용자 Interface - 인터페이스 📌 인터페이스 사용자가 서비스 또는 제품을 쉽게 이용할 수 있도록 도움을 주는 것 ✅ 사용자 인터페이스 사용자가 서비스를 사용할 때 마주하게 되는 화면에 있는 모든 것이 UI UX (User Experience) User - 사용자 Experience - 경험 📌 사용자 경험을 개발하고 디자인한다? ▶ 카카오톡을 사용하면서 우리가 경험할 수 있는 것은? 채팅 → ✅ 채팅이 바로 경험이다. ▶ 채팅을 어떻게 할 건데? 친구 검색 → 친구 추가 → 친구와 대화 (이것을 우리는 ✅ 유저 플로우라고 부른다.) ▶ 그럼 친구 검색은 어떻게 하게 할건데? 전화번호? 아이디? QR코드? ✅.. 2023. 10. 14.
CSR, SSR 렌더링 화면에 표시하는 것 HTML 파일이 화면에 그려질 구조까지 만드는 것 CSR, SSR 화면에 보일 페이지를 어디에서 그리느냐 CSR 클라이언트 사이드 렌더링 화면에 보일 페이지를 클라이언트가 만듬 ✅ 빠른 인터렉션 ✅ 필요한 부분만 리로딩 없이 서버로부터 화면을 갱신함 🚨 필요한 데이터를 한번에 받음 → 초기 구동 시간이 김 🚨 html body 부분이 비어있음 → 페이지 분석 어려움 SSR 서버 사이드 렌더링 화면에 보일 페이지를 서버에서 만들어서 줌 페이지 이동시 새로운 페이지 요청 ✅ 처음 서버에 요청하는 데이터양이 적음 → 초기 구동 시간 단축 ✅ html에 모든 컨텐츠가 담겨있으므로 SEO 문제 없음 🚨 장애 지점이 늘어남 🚨 트래픽이 많이 발생함 → 서버 비용 증가 🚨 서버가 죽어버리면.. 2023. 10. 7.
Open Props 원티드에서 진행하는 10월 프리온보딩 프론트엔드 사전과제를 하기위해 CSS 프레임워크나 라이브러리를 어떤걸 쓸까 고민하고 있었어요. 원티드 10월 프리온보딩 프로젝트 같이해봐요! https://www.wanted.co.kr/events/pre_challenge_fe_14 로그인 기능 구현, 하나부터 열까지! | 프리온보딩 FE 챌린지 10월 | 원티드 무료로 양질의 교육을 들어보세요! 챌린저만을 위한 다양한 혜택을 제공해드리고 있습니다. www.wanted.co.kr 프론트엔드뿐만 아니라 다양한 분야의 챌린지가 있으니 방문해서 확인해보세요! https://www.wanted.co.kr/events 다양한 커리어 성장의 기회 | 원티드 이벤트 커리어 성장과 행복을 위한 원티드의 다양한 이벤트를 만나보세요... 2023. 9. 22.
css에서 data 속성 접근하는 방법 ✅data 속성 HTML5에서 data 속성은 HTML 요소에 추가 정보를 저장할 수 있도록 한다. data- 로 시작하는 속성은 모두 사용 가능하다. 화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다. 🚨화면에 보여야 하고 접근 가능해야 하는 정보 → 데이터 속성에 저장하지 말기 🚨검색 크롤러가 data 속성 값을 찾을 수 없음 ✔️HTML 문법 ... ✔️CSS에서 접근하기 [data-page="1"]{ width: 50%; } [data-page="1"]::after{ content: attr(data-parent) } 🚨 이런경우 css가 인식하지 못할 수도 있어요. ❓ html1과 html2의 차이점은 무엇일까요? data-page="pg_single" data-page="pg_.. 2023. 9. 21.
아크 ARC 아크 무엇인가? 웹브라우저 출시는 언제? 2022년 4월 현재 macOS, iOS에서 사용 가능 윈도우 버전의 브라우저는 개발 중 → 2023년 12월에 출시 예정 ARC에 대하여 아크는 미니OS의 역할을 수행하려고 한다. 웬만한 일을 브라우저 안에서 해결할 수 있다. 운영 체제 역할을 하는 것이 목표라고 한다. ARC 핵심 기능 확장 프로그램 크롬의 확장 프로그램 모두 사용 가능 캡처 캡처 영역 자동 지정 사진, 텍스트, 웹페이지 영역을 딱 맞게 잡아줌 → 사용자가 드래그하여 지정할 필요가 없음 물론 수동 지정도 가능 웹페이지 전체 캡처 기능도 있음 노트 메모장과 같은 기능 하나의 웹사이트처럼 메모장 탭이 생긴다. 자동 저장 기능이 있다. 이젤 노트를 확장한 화이트보드 기능 텍스트, 이미지, 도.. 2023. 9. 20.
rel="noopener" rel="noopener" a태그의 rel=”noopener norefeere” 무엇을 의미하는지 알아보겠습니다. 워드프레스로 블로그 운영하는 분들이 많을 거라 생각됩니다. 글을 작성할 때 링크가 걸린 부분의 html 코드를 보면 a태그에 rel = “noopener” 속성 값이 설정되어 있음을 확인할 수 있습니다. 태그 하나의 페이지에서 다른 페이지를 연결하기 위한 하이퍼링크를 정의할 때 사용 href 속성 필수 - 연결할 페이지의 주소 url rel 현재 문서와 링크된 문서 사이의 연관 관계 검색 엔진들이 링크에 대한 정보를 수집할 때 rel 속성을 사용할 수 있음 href 속성 값이 있어야만 사용 가능 noreferrer rel의 속성값 중 하나 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP .. 2023. 9. 15.

티스토리툴바