최종 결과물 /imagine prompt: an oil painting in the style of Monet, a bright but softly toned morning scene with slightly muted colors, a large glass window without curtains showing green trees and letting in soft sunlight, a single checkered fabric armchair made of solid oak placed in front of the window, a blonde girl sitting on the chair with her back to the window, facing forward with her face pa..

공공기관 프로젝트에 많이 투입되다보니 이런 구조는 정말 매번 짜는 것 같아요그런데 구축을 하면서 접근성 작업도 함께 해야하는 프로젝트를 맡게 돼서 정말 마크업의 중요성을 뼈저리게 느꼈답니당ul li로 짜고 JS로 고치면 되겠지 하며 자만에 빠져 있다가 JS에서 너무 골치가 아파서 이제 마크업을 잘 해놓으면 고생이 덜하다는 것을 깨달았습니다..역시 사수님의 의견은 새겨 들어야 한다는 것.. 리스펙 모든 영역들은 focus가 논리적인 흐름, 순서대로 이동해야 하는데요 .. 마크업을 잘못하면 나중에 고생을 합니당 그래서 이제는 마크업부터 제대로 하려고 합니다? 하하리더님께서 자주 쓰시는 방법인데 정말 꿀팁이예요.. 꿀팁 함께 써보아요.. 줍줍 See the Pen <a ..

요즘 AI 기술이 정말 무섭도록 빠르게 발전하고 있다. 특히 Chat GPT나 DeepSeek 같은 AI 도구들은 다양한 분야에서 활용되고 있다.나는 퍼블리셔로 일하면서, 어떻게 하면 업무 효율성을 높일 수 있을지 항상 고민해왔다.코드 작성, 디자인 구현, 크로스 브라우징 이슈 해결 등 퍼블리셔의 업무는 생각보다 복잡하고 시간이 많이 들기 때문이다.그렇지만 제3자의 관점에서 보면 퍼블리셔가 솔직히 왜, 뭘 하길래 바쁜지? 흠 존중 받는 느낌을 받지 못하는 경우가 많다...그것이 가장 슬픈 일이다 ㅠ_ㅠ 그래서 효율적으로 시간을 절약하는 것이 관건인데 !!!!요즘 핫하다는 AI 도구들을 활용해보면서 괜찮은 것들을 선별해 업무에 적용하고 있는 중이다. 실제로 GPT를 통해 유지보수를 할 때 정말 많은 도움을..

See the Pen Untitled by posey (@fwapdhxw-the-animator) on CodePen.  얼마 전에 신규 프로젝트 구축을 맡으면서 접근성 마크까지 취득해야하는 경우가 있었다.구축을 해야하니 처음부터 코드를 잘 짜놔야 접근성 개선 항목이 줄어들기 때문에, 굉장한 부담감이 있었다, 그 중 메인 페이지에서 적용했던 기본적인 예시 코드를 공유해보겠다 ! 내가 받은 시안상으로는 ul li 구조가 아니면 반응형에서 너무 힘들 것 같아서 그냥 ul li로 구조를 짜버렸다.그래서 순서대로 포커싱이 가게 하는 코드를 짜야했다.그리고 접근성 개선을 위해 추가해야 하는 항목들을 정리했다. 필수는 아니지만 미리 잘 구축해놓지 않으면 나중의 내가 고생할 것 같아서 수많은 고민을 했다... ..

Java로 개발한 사이트인데, 개인적으로 역대급으로 접근성 마크 따기 힘들었던 힘들었던 사이트였다... 내가 다음에 이런 문제를 맞닥뜨렸을 때, 잊을까봐 정리해두는 중이다. 쉽게 말하자면, 저기 title 부분을 페이지마다 개별적으로 변경하라는 것이다. '국가수리과학연구소'는 연구소명이고, 그 뒤로는 1depth | 2depth | 탭 메뉴 이런 순서로 나와야 하는 것인데, 사실 이건 개발 영역이라 개발자 분께 해결 요청을 드렸으나, 개발 문제로 인해 페이지 별로 저걸 뿌려줄 수 없다는 답변을 받았다. 사실 잘 알아듣지 못했다. 리더님과 머리를 맞대고 나온 코드가 아래와 같다. 리더님께서 생각해낸 잔머리 코드... 저를 살리셨습니다 +_+ 각 페이지에 공통적으로 있는 요소들을 찾아 변수에 담고, 그걸 t..

구조는 이런 식으로 되어 있고, input에는 display: none;을 준 경우, label에는 focus가 가지 않는다.오래된 사이트를 유지보수 하다 보면 이런 것들이 접근성 심사에서 걸린다.예를 들어 '문의하기' 페이지에서 form 형식을 보면 파일첨부 버튼이 이런 식으로 들어가 있는 경우가 있다.   [해결 방법] 1. label 태그 하위에 input 태그를 넣고, 2. css 변경- display: none;을 줘 버리면 영역 자체가 사라져 버리기 때문에 opacity: 0;으로 주고, 영역은 살리되 눈에는 보이지 않게 만드는 것이 중요 ! 그리고 이 방법은 개발 구조는 유지하면서 시간은 많이 들이지 않는 야매 방법이다...더이상 손 쓸 필요가 없는 오래된 사이트에서만 이 방법을 추천한다 !..