본문 바로가기

UI

(227)

[ BE/DB ] SQLlite:기본편 2편 1. IIF (Immediate If)조건식의 참/거짓 여부에 따라 다른 값을 반환하는 함수입니다. SQL 표준은 아니지만, SQLite에서 간편하게 조건부 로직을 구현할 때 유용합니다.구문: IIF(조건식, 참일_때_값, 거짓일_때_값)-- products 테이블에서 price가 100보다 크면 'High', 아니면 'Low'를 반환하여 price_category 열로 표시SELECT product_name, price, IIF(price > 100, 'High', 'Low') AS price_categoryFROM products; 2. AS (Alias)테이블 또는 열에 임시 이름을 부여합니다. 쿼리를 더 읽기 쉽게 만들거나, 복잡한 계산 결과에 의미 있는 이름을 붙일 때 사용합니다.구문:열 별칭:..

[ Skill/Tool ]새로운 인사이트(Insight)를 얻을 수 있는 도구(Feat.Obsidian) 계층구조로 연결되는 것인 아닌 지식의 네트워크적 연결최근 김정운 박사의 영상을 보면서 지식의 네트워크적 연결이 인상적이였다.통상적으로 우리가 학교에서 배운 지식의 체계는 계층적인다.그 가장 대표적인 예가 종(Species)일 것이다.생명 > 역 > 계 > 문 > 강 > 목 > 과 > 속 > 종회사 > 회장 > 사장 > 팀장 > 차장/과장 > 대리 > 주임 > 사원 이제는 데이터의 연결 시대 이제는 더이상 데이터가 계층구조로만 연결되지 않는다. 하나의 구심정을 바탕으로데이터 가 분자적으로 연결된다. 연결이 될 수록 어떠한 맥락과 의미를 연결할 수 있다. ObsidianObsidian의 핵심은 상호 연결된 노트 네트워크를 만들고 관리할 수 있도록 설계된 놀랍도록 다재다능한 무료 애플리케이션입니다. 딱딱한 ..

[ UI / eyes-tracking ] 왜? F자로 홈페이지를 구해야하는가? 인터넷을 종종 검색하다보면 UI를 만들 때, F 형태로 홈페이지를 만들라고 한다.왜 그럴까?결론부터 말하면, 사람들이 컴퓨터 또는 모바일 스크린에서 정보를 습득할 때,"F"형태를 정보를 습득한다는 연구 결과가 나왔기 때문이다. Eyes-tracking 왜 사람은 F자로 글을 읽을까?사실, 사람들 본능적으로 F자로 정보를 습득하지 않는다. 그냥 문화적인 배경이 들어있다.우리가 책읽는 습관을 생각해보면 이해가 빨라진다.우리는 왼쪽 상단에서 오른쪽 하단으로 글을 읽는다. 이러한 문화적 습관이 F자로 정보를 습득하게만든 배경이다. 또한, 신문을 읽을때를 생각해보면 좋다. 신문의 경우는 이미지가 들어있기 때문에가장 website와 유사한 정보구조를 가지고 있다. 따라서, 큰 제목을 읽고 다음에 이미지가 있고 그다..

[ UI ] UI를 그릴 때 고려해야 할 사항 우리는 웹/모바일 UI를 그릴 때 다양한 부분을 고려해야한다.모바일은 2D 세계이고 우리가 사는 세계는 3D 세계이다.따라서, 그 간근에서 오는 부분을 최소화하는 것부터 시작하는 것이좋은 UI의 시작이라고 생각한다. 아래의 원칙 7가지는 고민 및 AI의 도움을 추가 보안된 주간적인 자료임을 말씀드립니다. 고려해야 할 주요 UI 디자인 원칙1. 시각적 계층 구조좋은 UI는 크기, 색상, 대비, 간격을 사용하여 중요한 순서대로 콘텐츠를 사용자에게 안내해야 합니다.연구 근거: 시각적 계층 구조는 게슈탈트 심리학 원리와 인지 부하 이론에서 비롯됩니다. 닐슨 노먼 그룹의 연구에 따르면 사용자는 인터페이스를 완전히 읽지 않고 스캔하는 것으로일관되게 나타났습니다.이유우리의 뇌는 인지 자원이 제한되어 있습니다. 좋은 ..

[ React ] 포트폴리오 상세 페이지 추가하며 고민했던 문제들 포트폴리오 리뉴얼 수행하기.포트폴리오 뉴리얼을 수행하려고 한다. 이유는 내 포트폴리오가 사람들에게설득력이 부족한 거 같다. 하여 설득력을 높일 수 있도록 프로젝트 상세 페이지리를넣을려고 한다.아래는 동기부여를 만든 영상이다.영상 URL은 맨 아래쪽 지금부터 상세 페이지를 만들면서 직면했던 문제를 어떻게 고민하고 해결했는지간략하게 기록해보았다. 고민지점1. React vs 다른 Framework고민난이도 : ★★★★React 일단 React를 그대로 사용하기로 했다. 이유는 React만 사용하여 서비스를 해 보는 것도좋은 경험이라고 생각한다. 몇몇 개인 사이트는 이미 Next js를 통해서 작동하고 있다.따라서, 일단은 React를 지속적으로 사용하면서 React만 사용할 때 직면하는 문제를해결해 나..

[ Next / loading ] Nextjs에서 대표적으로 사용되는 Loading Next js 에는 여러 가지 방식의 Loading 있다. 이것들을 어떻게 작동하는지 간략하게 알아보고 상황별 사용을 알아 보려고 한다. 요약기능 분류기능핵심 특징성능 영향자동 라우트 레벨 로딩폴더- 라우트 탐색 시작 시 자동 활성화 - 자동 제어 방식- 초기 로딩 화면 즉시 표시(TTFB(Time To First Byte) 개선 효과)eg. 간단한 페이지 전체 로딩 화면명시적 컨포넌트레벨 로딩Suspense fullback - 특정 컴포넌트 영역 로딩 상태 격리 및 관리 - 컨포먼트 래핑 제어 방식- 부분 화면 로딩으로 사용자 경험 향상eg. 복잡한 대시보드, 특정 섹션 데이터 패칭, 부분 업데이트스트리밍기반콘텐츠 로딩@defer 디렉티브- 서버 컴포넌트 렌더링 스트리밍 방식으로 개선 - 디렉티브 ..

[ node ] 기초 CRUD (Feat.폴더구조 이해) Node js를 통해서 간단한 CRUD를 해보면서 간단하 폴더구조도 경험해 보기.//주의Javascript엔진은 한 줄씩 읽고 위에서 아래로 내려오기 때문에 parse,config 같은 건 사전에 미리 위쪽에 배치해야한다.npm install express(필수)TipNode를 활용한 백만들기 할 때, 폴더 구조한 프로젝트에서 한 번에 npm 사용하기. project 이름 ㄴfrontend ㄴbackend ㄴnode_modulespackge.json..."scripts: { "dev" : npm backend/server.js". },... Ogranzing : routers + controllerrouter// 폴더 구조backed ㄴ ... ㄴ r..

[ BE / DB ] SQLlite:기본 1편 SQL과 NoSQLSQL 계열 :공통적으로 표준 SQL기반.MySQL, PostgreSQL, Oracle의 PL/SQL, MS SQL의 T-SQL 등 각 DBMS마다 고유한 확장 언어를 제공NoSQL 계열:- 문서형: MongoDB의 MQL, CouchDB의 MapReduce/Mango 쿼리- 키-값: Redis의 명령어 기반 인터페이스- 컬럼형: Cassandra의 CQL, HBase(Java API/Hive)- 그래프형: Neo4j의 Cypher, Amazon Neptune의 Gremlin/SPARQL- 기타: Elasticsearch의 Query DSL, DynamoDB의 API/PartiQL SQLNoSQL데이터 모델데이터를 테이블(행과 열) 형태로 저장합니다.데이터 간의 관계를 명시적으로 정의..

[ UI / pagination ] 어떤 타입의 페이지네이션들이 있을까? 최근 게시판을 만들어볼려고 작업을 하고 있었다.게시판은 정말로 간단한 작업이다. 그렇기 때문에 특별한 기술은 필요없다.그럼에도 게시판에서도 나름의 UX를 고민해보고 싶어서'페이지네이션(pagination)'에 고민을 해 보았다.하여, AI의 도움을 받아 TOP3에 해당하는 페이지네이션 UI를 보고 장단점을 고민해 보자. 페이지네이션 목록1. 네비게이션 타입2. 컨텍스트 타입3. 하이브리드 점프 타입 1. 네비게이션 타입가장 많이 쓰이는 타입 중 하나라고 생각한다.이 페이지네이션의 핵심은 처음과 맨 마지막 중간즘에 있을때,가운데 3개를 제외하고 양 옆에 ... 처리하는 방식이다.장점단점처음/이전/다음/마지막 페이지로의 완전한 네비게이션 제공현재 위치와 전체 범위를 명확히 표시하여 사용자 방향성 제공접근..

[ UI / 색상 위계] 메인페이지 시각적 계층구조를 통한 강조 아래의 사진은 개인적으로 생각을 반영한 것임을 말한다.더불어, 브라우저 개발자 코드를 통해 수정한 부분이며, Episoden 무관함을 전달한다.지극히 개인적인 취향을 담은 개인 작업 기존 색상과 UI를 변경하여 Start 버튼을 강조하고자 했다. AI에게 물어본 결론:Ai는 물어볼 때마가 다른 결과값 + 어떤 질문을 했는지에 따라 정보가 달라진다.따라서 약간의 편차가 있다는 것을 인지하고 내용을 읽어주길 바란다.영역별 기존수정정보 표시 (Next)"Join next session!"이라는 텍스트가 큰 제목으로 있고, "Next topic:"이 별도로 표시됨."Join NEXT session!"에서 'NEXT'가 강조되어 있어 더 명확한 계층구조를 보여줌.버튼 (Start)"Start this sessio..

[ ReactNative / expo ] .env를 설정해 볼까요? 글을 쓰는 저는 한 번도 ReactNative를 만저본 적이 없다. 다만 React를 해봤으니,괜찮지 않을까 라는 아니란 생각에 출발한 프로젝트였다.결론부터 말하면,이 글은 여전히 .env 설정과 sensitive Info 등록을 고민중에 있는 글임을 밝힙니다.앱은 Ai + Expo 코드를 작성했다.많은 코드는 Ai와 함께 코드를 작성했고 많은 component 코드는 문제가 없었다.그런데, 광고를 넣기 위해서 데이터를 Ai에게 요청하면서 문제가 발생했다.Ai가 출력하는 코드는 문제가 없다고 생각했다. 이유는 내가 React 기반 코드를작성해본 사람이기 때문이다. 1. expo .env는 next js와 같이 전용 접두어가 있다.2. 필요하다면 Ai 말고 "검색"을 통해 데이터를 찾아야 한다. Rea..

[ UI / Pictogram ] '픽토그램'을 왜 사용해야하는가? 글자가 있는데?! 최근 여행관련 홈페이지를 보다가 가독성이 안되는 사이트를 보고이것보다 더 좋은 사이트가 있겠지? 라는 생각에 몇몇 사이트를 검색했다.그중 눈에 띄는 부분은 왜 이 사이트가 의미 전달이 선명하고, 직관적인지?라는 생각이 들었다. 그 차이는 픽토그램 여행을 떠나 보자 '일정 선택' 영역만 볼까요?대다수 일정 페이지는 '스카이스케너'와 같이 UI를 제작한다. 배경과 대비차가 좋아인식하기도 좋다고 생각했다. 다만 각각의 항목이 뭘 나타내는지 읽기 위해선 눈에힘을 줘야 한다. 각 항목별() 정보밀도(텍스트 개수)가 높다. 반면, 에어아시아는 픽토그램을 활용해 정보 밀도(텍스트 개수)를 낮춤으로써, 가독성을 높였고,각 항목별() '날짜 입력' 단어를 제외하고, 픽토그램과 날짜 입력 방식을 조합, 장소는 흔히 ..

[UI / 여백의 미 ] 동양미술에서 말하는 '여백의 미'(Feat. white-space ratio) 내가 여백의 미를 찾게 된 것은 화면 구성에서도 여백 비율에 따라서정보의 가독성이 달라지고 가시성도 높아진다.특히, 애플 홈페이지를 보면 여백이 굉장히 높다. 스티브 잡는 소니를 좋아했다고한다.이 내용은 AI의 내용으로 작성된 점을 인지해 주시고 읽어 주시기 바랍니다.더불어, 최대한 데이터를 확인하기 위해 노력했다는 점을 인지해 주세요.ResourcesA more accurate approach would be to:Consult primary sources in their original languages (Classical Chinese, Japanese, and Korean texts)Review peer-reviewed academic publications specifically focused ..

[ 인지 / LandingPage ] 어떤 메인 UI가 더 편하게 읽힐까?(3개 홈페이지 비교) 먼저 현재 개인으로서 "혼자" UIUX 분석이 어렵기 때문에 AI 툴을 활용하여, 이 AI를 활용하여, 이 친구가 좋다고 생각하는 데이터 기반으로 측정한 결과로 작성한 글입니다.개수와 사례이커머스 및 서비스 플랫폼 데이터:- 상위 성과를 보인 글로벌 이커머스 플랫폼 약 500개 사례- 주요 리테일 웹사이트 약 300개 사례- 서비스 기반 플랫폼 약 200개 사례이 중에서 제시된 3개 웹사이트와 유사한 구조와 목적을 가진 케이스는:- 네이버 스토어 유형: 약 150개 사례- 쿠팡 유형: 약 120개 사례- 퍼블로그 유형: 약 80개 사례 한계 : Ai, Ai 가 좋다고 생각하는 UI/UX 데이터 기반이 어떤 건지 확인 불가. 비교 대상 : 쿠팡 vs 퍼블로그 vs 네이버 스토어 첫 화면 비교(L..

[ React / 데이터] 메모리 관점으로 JavaScript와 React는 어떻게 다른가? 메모리 관점에서 React를 고려해 보면리엑트는 메모리 주소를 참조하고 있다. 따라서 메모리 주소가 변경되어야만 Rendering을 시도한다. JavaScriptReact메모리 관점직접적인 메모리 조작, 단일 참조불변성 기반 새로운 메모리 할당, 여러 버전의 상태 유지상태 보존 단일 상태만 유지이전 상태의 히스토리 관리 가능(시간 여행을 통한 디버깅)메모리 사용량효율적인 메모리 사용 bc 직접 수정약간 더 많은 메모리 사용 bc 새로운 객체 생성하기 때문가비지 컬렉션let obj = { value : 123} obj = null즉시 대상const [ obj, setObj ] = useState({value : 123});setObb(null)내구적으로 관리하며 적절한 시점에 GC 처리 1. 데이터 처..

[ BE / DB ] SQLite을 활용하여 local에 데이터 저장하기(Feat. 공홈) 아래의 정보는 expo 공식 사이트에서 가져온 코드를 해석해본 내용이다. SQLiteA library that provides access to a database that can be queried through a SQLite API.docs.expo.dev Basic CRUD opereationsconst db = await SQLite.openDatabaseAsync('databaseName');// `execAsync()` is useful for bulk queries when you want to execute altogether.// Please note that `execAsync()` does not escape parameters and may lead to SQL injection...

[ 육체 ] 오랫 동안 직업을 유지하기 위한 전략 이런 말이 있다. 인간은 턱시도를 입은 유인원일 뿐이다. 생명공학(?)이 발달하면서 DNA를 통해서 우리를 조상을 찾아 올라갈 수 있게 됐다. 그렇게 알게 된 것이 우리는 호모 사피엔스는 아프리카 사바나지역에서 걸어나온 호모 에릭투스의 후손이다.걷는 동물 : 호모 에릭투스호모 에릭투스의 가장 큰 장점은 두 발로 걸을 수 있게 됐다는 것이다. 인간에게 있어서 걷기란 그정도로 중요하다. 호모 에릭투스는 댈략 200만 년 전에서 10만 년 전에 출현한 것으로 나타난다.내가 말하고 싶은 부분은 그만큼 인간은 몸은 걷는 것이 중요한다. 그런데 산업혁명이 일어나면서 꼼작없이 책상에 앉아서 생활하기 시작했다. 그렇게 우리는 200만 년 전부터 생활해 얻은 걷는 능력을 태화시켰다. 그렇게 우리는 골반의 기능을 잃어버리..

[ 경제 / IT ] 세계 경제가 미치는 한국 IT 시장 (Feat. 인플레이션) 세상은 AI 붐으로 미친 듯이 성장했다. 특히 엔비디아가 중심이 되어 엄청난 성장을 이끌었다. 하지만 이 글을 쓰는 시점에서, AI 열풍은 예전만큼 강렬하지 않다. 대신, 세상은 다시 인플레이션과 금리에 주목하기 시작했다.2025년 미국 대통령으로 트럼프가 당선된다. 그의 대표적인 정책 중 하나는 "관세"다. 트럼프는 과거 관세를 "아름다운 단어"라고 표현하며, 이를 통해 미국 내 제조업 부흥과 무역적자 축소를 목표로 했다. 왜 인플레이션이 중요한가?코로나 팬데믹 동안 과도한 유동성 공급은 2022~2023년에 고금리 시대를 가져왔다. 사람들은 대출을 줄였고, 소규모 자영업자들은 경제적 어려움을 겪었다. 2024년에는 금리가 일부 완화되었으나, 2025년에도 여전히 높은 금리 시대가 지속될 가능성이 크다..

[ FE ] 우리가 홈페이지를 만들 때 고려해야할 사항은 뭘까?-2 4. 서버와의 데이터 교환을 제어합니다.WWW가 구상되었을 당시 클라이언트와 서버 간의 데이터 교환은 몇 가지 방법으로 제한되었습니다.링크를 클릭하면 GET 새 페이지가 나타나고 새 페이지가 렌더링됩니다.양식을 제출하면 새 페이지가 렌더링됩니다 POST . GET이미지나 객체를 포함하면 GET 비동기적으로 렌더링됩니다. 허나, 여기에는 2가지 문제점이 있습니다. 새 페이지로만 데이터를 보낼 수 있으며 무엇보다도 뒤로 가기 버튼을 할 수 없다는 것이다.데이터를 보낼 때마다 새 페이지를 불러오기뒤로 가기 버튼이 제대로 동작하지 않는 문제 발생이와 같은 문제는 Javascript와 AJAX를 통해서 해결 가능해집니다. 다시 말해 사용자 경험이 좋아집니다. 이걸 React 관점으로 바꾸면 비동기 데이터 ..

[ 서버 / AWS ] 아마존 AWS 활용한 클래식 서버 체험하기(S3-EC2-DB) 아마존 AWS 교육을 받았다. 이 글은 각 vscode 등으로 client & server가 이미 다 작성됐다는 상태로 AWS만 설정 하는 방법을 공유하는 글이다. 온프레미보다 장점은 역시 가변성. 언제든지 스케일 확장이 빠르게 가능하며, 특히 초기 스타트업에서 장점은 기회비용이 적다는 것이다. 언제든지 프로젝트의 스케일을 줄일 수 있다는 것이다. ‘S3 – EC2 – DB’ 개념 설명S3 (Simple Storage Service)역할: 대용량 데이터를 저장하고 관리하는 객체 저장 서비스입니다. 웹사이트, 모바일 앱, 백업, 아카이브 등 다양한 용도로 활용됩니다.EC2 (Elastic Compute Cloud)역할: 가상 서버를 생성하여 웹 애플리케이션, 데이터베이스, 기타 소프트웨어를 실행하는 서..

이전 1 2 3 4 ··· 12 다음

티스토리툴바