ux dev

AI 코딩 도구를 활용해 UI를 만들고 화면을 빠르게 실험하는 흐름이 보편화되면서, 이제는 단순히 “좋아 보이는 디자인”을 만드는 것보다 “일관된 기준에 맞는 디자인”을 유지하는 일이 더 중요해졌습니다. 문제는 이 기준이 사람끼리만 공유되는 문서에 머물면, AI는 그 의도를 정확히 반영하지 못한다는 점입니다.이런 배경에서 주목받는 개념이 바로 DESIGN.md입니다. DESIGN.md는 프로젝트의 디자인 원칙과 시각적 규칙을 마크다운 문서로 정리해, 사람이 아니라 AI도 이해할 수 있게 만드는 방식입니다. 쉽게 말해, “우리 서비스는 어떻게 보여야 하는가”를 텍스트로 명확히 선언한 문서라고 볼 수 있습니다.이 글에서는 DESIGN.md가 무엇인지, 왜 필요한지, 어떤 내용을 담아야 하는지, 그리고 실제 ..

옵시디언(Obsidian)을 처음 사용할 때 많은 사람들이 가장 먼저 고민하는 것은 두 가지입니다. 하나는 노트를 어떻게 서로 잘 연결할 것인가이고, 다른 하나는 프론트매터(Frontmatter)를 어떻게 정리해야 할 것인가입니다.처음에는 폴더를 촘촘하게 나누거나 태그를 많이 붙이면 정리가 잘 될 것 같지만, 실제로는 시간이 지날수록 관리만 복잡해지는 경우가 많습니다. 반대로 너무 단순하게 쓰면 나중에 원하는 정보를 다시 찾기 어려워집니다.그래서 이번 글에서는 옵시디언에서 노트 간 연결성을 자연스럽게 높이는 방법과, 프론트매터를 부담 없이 시작하는 실용적인 작성법을 함께 정리해보겠습니다.프론트매터란 무엇인가프론트매터는 노트 맨 위에 들어가는 YAML 형식의 메타데이터 블록입니다. 노트의 제목, 태그, 작..

AI로 코드를 만드는 일이 더 이상 낯설지 않은 시대입니다. 이제 많은 개발자들이 자연어로 요구사항을 던지고, AI가 그에 맞춰 코드를 생성하는 흐름에 익숙해지고 있습니다. 이런 방식은 흔히 “바이브 코딩”이라고 불립니다. 아이디어를 빠르게 형태로 만들고, 초안을 생성하고, 반복 작업을 줄이는 데는 분명 강력합니다. 하지만 실제 프로젝트로 들어가면 금방 한계가 드러납니다. AI가 만든 코드는 얼핏 그럴듯해 보여도, 구조가 불안정하거나 기존 규칙을 어기고, 테스트를 통과하지 못하거나, 예상하지 못한 영역까지 건드리는 경우가 많습니다. 결국 중요한 것은 AI가 코드를 써주는 능력 자체가 아니라, 그 AI가 얼마나 통제된 환경 안에서 안정적으로 일하느냐입니다. 이 지점에서 등장하는 개념이 바로 하네스 엔지니어..

Claude Code로 개발을 하다 보면, 파일 수정이나 명령어 실행 단계마다 매번 "Yes"를 눌러줘야 해서 코딩 흐름이 끊기는 경우가 많습니다.오늘은 이 번거로운 승인 과정을 건너뛰고, AI가 알아서 작업하도록 설정하는 3가지 방법을 정리해 드립니다. 본인의 작업 환경과 안전성에 맞춰 가장 적합한 방법을 선택해 보세요!1. 묻지도 따지지도 않고 "다 Yes" (가장 빠름)가장 강력하고 편리한 방법입니다. 파일 수정부터 터미널 명령어(Bash) 실행까지 모든 권한을 클로드에게 위임합니다. 중간에 흐름이 전혀 끊기지 않습니다.사용 방법: 터미널에서 Claude Code를 시작할 때 아래 플래그를 붙여서 실행합니다.claude --dangerously-skip-permissions⚠️ 주의사항: 이 모드는..

오늘의 학습 목표오늘 공부를 마치면 아래 정도는 되어야 합니다.데이터베이스의 특징을 설명할 수 있다.스키마와 인스턴스의 차이를 구분할 수 있다.기본키, 후보키, 대체키, 외래키, 슈퍼키를 구분할 수 있다.1NF, 2NF, 3NF, BCNF의 의미를 설명할 수 있다.정규화 관련 기출형 문제를 풀 수 있다.1. 데이터베이스 기본 개념1-1. 데이터베이스란?데이터베이스는 여러 사람이 공유하고 사용할 목적으로 통합 관리되는 데이터의 집합입니다.쉽게 말하면, 데이터를 그냥 쌓아두는 것이 아니라 체계적으로 저장하고 검색하고 수정할 수 있게 관리하는 구조입니다.예:회원 정보상품 정보주문 내역철도 예약 정보핵심:데이터를 체계적으로 저장여러 사용자가 함께 사용검색, 수정, 삭제가 가능1-2. 데이터베이스의 특징정보처리기..

오늘의 학습 목표오늘 공부를 끝내면 아래 정도는 되어야 합니다.변수와 자료형의 기본 개념을 설명할 수 있다.연산자와 증감 연산 결과를 계산할 수 있다.if, else, for, while 코드의 실행 결과를 해석할 수 있다.C, Java, Python의 기본 문법 차이를 큰 틀에서 구분할 수 있다.요구사항 확인 관련 핵심 용어를 암기할 수 있다.1. 변수와 자료형 정리1-1. 변수란?변수는 값을 저장하는 공간입니다.예:int a = 10;의미:a라는 이름의 공간을 만들고그 안에 10을 저장한다핵심:변수는 값을 담는 상자문제에서는 변수에 어떤 값이 들어가고 어떻게 바뀌는지를 보는 것이 중요함1-2. 자료형이란?자료형은 어떤 종류의 값을 저장할지 정하는 것입니다.대표적인 자료형:정수형: int실수형: flo..

오늘의 학습 목표오늘 끝나면 아래 정도는 되어야 합니다.SELECT, WHERE, ORDER BY가 각각 무슨 역할인지 설명할 수 있다.=, , >, , LIKE, IN, BETWEEN을 보고 조건 의미를 해석할 수 있다.간단한 SQL 문제를 읽고 결과를 예상할 수 있다.소프트웨어 생명주기와 폭포수, 애자일, 나선형 모델의 차이를 말할 수 있다.1. SQL 기본 문법 정리1-1. SELECTSELECT는 테이블에서 원하는 열(column)을 조회할 때 사용합니다.기본형:SELECT 열이름FROM 테이블이름;예시:SELECT nameFROM student;의미:student 테이블에서name 열만 조회한다여러 열 조회:SELECT student_id, name, gradeFROM student;모든 열 조..

정보처리기사 실기를 준비할 때 가장 많이 하는 실수가 있습니다. 범위가 넓다는 이유로 처음부터 끝까지 이론서를 정독하려는 것입니다. 이 방식은 시간이 넉넉하면 몰라도, 시험일까지 4주도 남지 않은 상황에서는 효율이 떨어집니다.실기는 결국 기출 기반의 반복, 빈출 개념 암기, SQL과 프로그래밍 문제 적응력이 점수를 만듭니다. 특히 직장인이나 하루 공부 시간이 제한된 수험생이라면 더 그렇습니다. 남은 기간 동안 중요한 것은 많이 보는 것이 아니라, 자주 나오는 것을 정확히 반복하는 것입니다.이번 글에서는 2026년 3월 23일부터 4월 18일 시험 당일까지를 기준으로, 정보처리기사 실기를 준비하는 현실적인 세부 공부표를 정리해보겠습니다.정보처리기사 실기 준비의 기본 원칙먼저 방향부터 분명히 잡아야 합니다...

티스토리에 개발 관련 글을 올릴 때 코드가 평범한 텍스트처럼 보이면 글의 완성도가 많이 떨어집니다. 특히 HTML, CSS, JavaScript처럼 구조와 문법이 중요한 코드는 색상 구분이 있어야 읽기 훨씬 편합니다.이럴 때 많이 사용하는 방식이 코드 하이라이팅 라이브러리 적용입니다. 티스토리에서는 별도의 빌드 환경 없이도 스킨 편집만으로 적용할 수 있고, 그중에서 가장 무난한 선택지가 Prism.js입니다.이번 글에서는 티스토리에 Prism.js를 적용하는 방법부터, 실제로 하이라이팅이 안 될 때 확인해야 할 핵심 원인까지 정리해보겠습니다.왜 Prism.js를 많이 사용할까Prism.js는 가볍고 구조가 단순합니다. CSS 파일로 테마를 불러오고, JS 파일로 문법 하이라이팅을 활성화한 뒤, 코드 블록..

“Claude가 Figma에서 직접 디자이너처럼 모든 화면을 자동 제작한다”고 생각하면 과장이고, 실제로는 아래 3가지 방식으로 이해하는 게 맞습니다. Figma는 현재 Claude Code / Claude를 MCP 클라이언트로 지원하고, Figma Design, Figma Make, FigJam과 연결할 수 있게 안내하고 있습니다. 가장 실용적인 방법은 Claude Code + Figma MCP 서버입니다. 이 방식에서는 Claude Code가 Figma 파일의 디자인 맥락, 변수, 컴포넌트, 레이아웃 정보를 읽고, 그 정보를 바탕으로 코드를 만들거나 수정합니다. 또 지원 클라이언트에서는 실제 브라우저 UI를 편집 가능한 Figma 프레임으로 보내는 code-to-canvas도 가능합니다. 정리하면 ..