List 27

[앱 접근성] 2. 내 머리가 나빠서(feat. 초점 이동) - 쓰는듕

앱 접근성에서 중요한 역할인 초점 이동에 대해 글을 쓰려고 한다! 사실 우리 모두 접근성 접근성 하지만 시간에 쫓기다 보면 다 맞추지 못하고 작업을 하게 된다. 그리고 개발자의 경우는 접근성에 대해 지식이 더 부족하기 떄문에 각 태그가 가진 고유 기능을 활용하지 않고 유사 태그를 사용하여 접근성 위배가 되는 경우도 있다. (이 부분은 개발자를 뭐라고 하는 것이 아닌, 관점 차이입니다. ) 예시로 든다면 내가 담당한 앱에서는 뒤로가기 이동 버튼을 모~두 a 태그에 href는 아예 없는 상태로 onclick으로 기능을 제어하여 약 300페이지 가량을 모두 바꾸는 일이 있었다.... 1️⃣ 링크(a)와 버튼(button)은 구분하여 사용하자🤔 왜?먼저, 링크와 버튼을 선택하여 스크린리더가 읽어줄때 다음..

Study 2026.01.02

[앱 접근성] 1. VoiceOver? TalkBack? 그거 어떻게 하는건데..

서금원 프로젝트 마지막 과업. 접근성 프로젝트였다.내게 남은 시간은 약 3주뿐이었고 앱은 해본적도 없을 뿐더러 어떻게 해야 하는지, 개발 환경도 총체적 난국이었다. (감히 커밋할 수 없고 감히 테스트를 할 수 있는 상황이 아니였음)게다가 소스는 엉망진창.. 운영소스에 데이터와 디자인, 구조를 건드리지 않고 해야하는 문제라 굉장히 힘들었다. 어쨌든. 앱 접근성은 합격을 했고, 나의 경험을 바탕으로 정리를 해보려고 한다. 👉 스크린리더 그게 뭔데 스크린리더는 화면 속 요소들을 읽어주는 도구이다.그렇지만!! 모든 것을 읽어주는 것이 아니고 구조와 의미를 전달하는 도구라고 생각하면 된다. 🗣️ 스크린리더가 읽어주지 않는 것색상위치크기시각적 강조 🗣️ 스크린리더가 읽어주는 것요소의 이름(label)..

Study 2026.01.01

저,, 이거 404떴는데요...

404가 뭘까?이미지 보면 애가 울상이다. 대충 안보이거나 잘못왔다는 뜻이겠지. 저 숫자 값은 HTTP 상태 코드를 뜻한다. 이 코드엔 어떤 것들이 있는지 보겠소이다~ 먼저, HTTP의 상태 코드란? 클라이언트가 보낸 HTTP 요청이 어떻게 되는지 웹 서버에서 알려주는 숫자 코드이다. 내 포트폴리오에서 보이는 값들이다.Status를 보면 다양한 숫자들이 보이는데, 나는 이 숫자에 대해서만 기록을 하겠다 ! 101프로토콜 전환 (나에게는 큰 의미는 없어보임) 200서버가 정상적으로 처리 304지정한 리소스가 갱신되지 않아 처리하지 않음 404리소스 찾을 수 없음 가끔 css나 이미지가 업데이트되지 않았을 때는 304인지 확인해보면 될 것 같다.안나오는 경우라면 404를 확인하고, 문제 해결을 하면 ..

Study/Resources 2025.08.09

[Nextjs 험난한 여정] 2-2. 내가 바로 웹사이트 건축가

이번 글은 스압이 예상됩니다. 그런데 요즘도 스압이라는 말을 쓰나요?…쩝~ 🪜 헤더 구조util: 로그인, 회원가입 등 보조 기능 제공logo: 사이트 아이덴티티 역할gnb: 주요 메뉴 제공하여 사이트 구조를 쉽게 파악 가능 🪜 푸터 구조site map: 주요 하위 메뉴 제공info, copy: 회사정보 및 저작권 문구sns: 외부 sns 채널 연결 ⚒️ 대략적인 사이트 구조 모습아래에는 실제 레이아웃 코드를 작성하겠다. 1️⃣ Header.js 1️⃣ 실제 화면 2️⃣ Footer.js2️⃣ 실제 화면 아니갑자기 프로젝트 투입해야해서 여기까지 쓰고 올리겠습니다ㅜ

Study/Develop 2025.05.02

[Nextjs 험난한 여정] 2-1. 부실공사 방지하기

앞서 폴더 구조를 잡았으니 이번엔 사이트 구조를 잡아보겠다. 정말 단순한 구조이다.이미지에선 header와 nav가 분리되어 있지만 사실상 붙어있다고 해도 무방. 아무튼~ 이 구조를 만들기 위해 이전에 만든 폴더 구조를 활용하여 작업할 것이다. (작업 전 추가된 내용이 있는데 Emotion이라는 라이브러리를 사용하게 되었다. 이전 글에 업데이트하겠숨) 📂 layout 📂 Footer.js 📂 Header.js 📂 styles.js 각 파일 설명을 하자면,Footer.js: 레이아웃 푸터 담당Header.js: 레이아웃 헤더 담당(nav 포함)styles.js: 레이아웃 스타일(css) 담당 갑자기 여기서 골🦴 아파지는 문제 발생.요소를 쪼개서 레이아웃을 구성하고 스타일을 짜야하는데 어떻게 해야..

Study/Develop 2025.04.30

[Nextjs 험난한 여정] 번외. 이상한 데에서 찾는 궁금증(주기적으로 업데이트할거시다)

근본없이 공부하느라 갑자기 궁금한 것들을 찾고 기록하는 소연브러리입니다. (20250429) 궁그미 1️⃣ 중괄호의 의미는 뭘까?// case Aimport { tistory } from '경로'; // case Bimport tistory from '경로'; case A는 named import, case B는 default import라고 칭하겠다. 💫 named import의 경우 js 내 유틸 함수가 다수일 경우여러 컴포넌트를 한 번에 export할 때 💫 default import의 경우 js 내 유틸 함수가 단일인 경우 로 나눌 수 있다. (20250430) 궁그미 2️⃣ 리턴 아래에 div를 감싸야 하는 이유는 무엇인가료return ( ); 위와 같이 작성하니 에러가 났다...

Study/Develop 2025.04.29

[Nextjs 험난한 여정] 2. 구조 파악하는데 213498205시간

드디어.... 지옥의 불구덩이로 들어가게숩니다. 우리는 계속 이 문서를 볼 거시다... -> https://nextjs-ko.org/docs/getting-started 시작하기 – Nextjs 한글 문서Next.js 문서에 오신 것을 환영합니다.nextjs-ko.org 🗂️ 구조별 폴더 생성 및 컨벤션 정립Getting Started > Project Structure를 보면 프로젝트 구조가 나와 있으며 해당 문서를 참고하여 다음과 같이 만들었다.📂 public📂 src 📂 app  📂 assets  📂 components  📂 layout  📂 pages 📂 각 폴더별 설명public정적 자산을 제공(favicon, og:images 등)src/app실제 작업 파일assets이미지..

Study/Develop 2025.04.29

[React 여정 시작] 1-3. Material UI를 아시나요?

Material UI는 Google의 Marerial Design을 구현한 오픈소스 라이브러리다.줄여서 mui라고 부르고 이번 프로젝트에선 해당 라이브러리를 사용하기 때문에 설치를 해보겠다. 1️⃣ 설치npm install @mui/material @emotion/react @emotion/styled 2️⃣ 스타일이 지정된 구성 요소 사용npm install @mui/material @mui/styled-engine-sc styled-components 2️⃣➖1️⃣ 옵션mui는 기본적으로 Roboto를 사용한다고 되어 있으나 나는 다른 폰트를 설치하겠다. # Roboto Installnpm install @fontsource/roboto# icon Installnpm install @mui/ico..

Study/Develop 2025.04.29

[React 여정 시작] 1-2. 프로젝트를 만들어봅시다.

1️⃣ node js 설치# fnm 다운로드 및 설치winget install Schniz.fnm# Node.js 다운로드 및 설치fnm install 22# Node.js 버전 확인node -v# npm 버전 확인npm -v 2️⃣ 프로젝트 생성2️⃣➖1️⃣ 자동설치npx create-next-app@latest# 프로젝트 이름What is your project named? my-app# TypeScript 사용여부Would you like to use TypeScript? No / Yes# ESLint 사용여부Would you like to use ESLint? No / Yes# Tailwind CSS 사용여부(UI키트)Would you like to use Tailwind CSS? No ..

Study/Develop 2025.04.21

[React 여정 시작] 1-1. VSCode Extensions

이번에 시작하게 된 프로젝트에서 리액트를 쓰게 되었다.리액트를 써보기는 했으나 거의 4-5년전 일이라 다 까먹어버렸다 (냠) 셋팅 전 필요한 VSCode 확장 프로그램 리스트부터 소개하겠다~! Reactjs code snippetsReact 개발을 위한 Snippet들을 제공 JavaScript (ES6) code snippets Javascript 코드 조각을 제공 ESLint 문법오류 및 버그 확인 npm Intellisense npm module을 import 할 때 자동완성 기능을 제공 + 20250421나는 퍼블리셔이기 때문에 필요한 확장프로그램이 하나 더 있다.vscode-style-componentsReact 환경에서 css 속성을 자동완성 시켜주는 프로그램

Study/Develop 2025.04.18